webpack之css文件处理
日期: 2020-04-03 分类: 个人收藏 408次阅读
项目开发过程中,我们必然要添加很多样式,而样式往往在一个单独的文件中。基于webpack模块化编程,我们不用再在head标签中引入多个css文件,那样是很麻烦的,那种方法已经过时了。我们应该将其bundle.js中,即让bundle.js依赖所有样式文件
因为入口文件只有一个main.js所以我们得在其中引入样式文件
require('./css/normal.css')
1npm install --save-dev(意为仅在开发时依赖) css-loader
2npm install --save-dev style-loader
3在webpack.config.js中写如下代码
module:{
rule:[
{
test:/\.css$/,
use:{'style-loader','css-loader'}
}
]
}
我们要在main.js主文件中导入依赖的css文件
其中css-loader只负责将样式文件加载出来,并不负责解析,而style-loader才负责解析
需要注意的是在上述代码中我们按照这种顺序写两个加载器,因为webpack读取时是从右往左读取的,反常规
除特别声明,本站所有文章均为原创,如需转载请以超级链接形式注明出处:SmartCat's Blog
上一篇: 【Java集合】除了Vector,还有另一个提供线程安全的List是什么?
下一篇: angular 报错 No value accessor for form control with name ‘xxx’
精华推荐