首先是在开发者环境下
自己书写的css,虽然可以直接在index.html中引入,但是index.html会原封不动的导出来,但是我们需要重新将css模块进行输出,所以需要重新设置。
1.在入口文件index.js中引入index.css
此时,在html模板页面中不用引入样式
//index.js
require('./index.css');
2.加载css文件的解析插件
loader的作用是将源代码进行转化,转换成我们需要的模块,loader的设置在modules中进行设置。具体有关插件的介绍可是在“webpakc之插件介绍中看到”。
解析样式可萌需要的插件(根据自己的样式文件类别进行选择):
- css-loader(解析@import这种语法以及路径)
- style-loader(将css加入到head标签中)
- less-loader(把less文件解析成css,实现需要安装less)
- sass-loader
- stylus-loader
3.使用插件时的样式优先级
1.在一般的style标签中,样式位置越向下,优先级越高,会覆盖前面的样式。
2.style-loader默认会把标签插件head的底部,如果想插入到样式的顶部,需要自己设置style-loader的options中的“insetAt”,将其值设为top
{test:/\.css$/,use:[{
loader:'style-loader',
options:{
insertAt:'top',//将解析出的样式插到页面的顶部
}
},'css-loader']}