Young87

当前位置:首页 >个人收藏

webpack之css文件处理

项目开发过程中,我们必然要添加很多样式,而样式往往在一个单独的文件中。基于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’

精华推荐