样式文件的打包方式(补充),css的模块化

webpack入门(5)

样式文件的打包方式(补充)

上一节学习了样式loader的使用,

样式文件的打包方式(补充),css的模块化_第1张图片

像上图这样在js文件中通过import方式引入scss文件会按照配置的四个loader依顺序从右往左执行,

但是如果在scss文件中引入了其他的scss文件,那么引入的scss文件并不会执行四个loader,而是只执行了css-loader和style-loader,如下

样式文件的打包方式(补充),css的模块化_第2张图片

如果想要执行四个loader就需要对loader进行配置

样式文件的打包方式(补充),css的模块化_第3张图片

importLoaders的意思是当遇到通过import引入的scss文件,先去执行额外的两个loader

接下来学习一下css的模块化

看下面这个例子

样式文件的打包方式(补充),css的模块化_第4张图片
样式文件的打包方式(补充),css的模块化_第5张图片

首先创建了一个createAvatar.js文件,这个文件可以在页面上生成一张图片,在index.js中调用这个方法,页面上就有了两张图片,但是这两张图片的样式都受到了我们引入的index.scss的影响,为了避免影响其他文件的样式,这里就要实现css module,也就是css模块化

配置如下:

样式文件的打包方式(补充),css的模块化_第6张图片
样式文件的打包方式(补充),css的模块化_第7张图片

以上改造之后,index.scss就不会影响到createAvatar创建的图片了,在css-loader中配置module:true就是表示对css进行模块化打包

接下来看看字体图标的打包方法

样式文件的打包方式(补充),css的模块化_第8张图片


样式文件的打包方式(补充),css的模块化_第9张图片
样式文件的打包方式(补充),css的模块化_第10张图片
样式文件的打包方式(补充),css的模块化_第11张图片

通过file-loader打包即可

你可能感兴趣的:(样式文件的打包方式(补充),css的模块化)