Open hexuanzhang opened 7 years ago
CSS-loader读取css文件,另一个是Style-loader,将style标签插入到html页面
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
...
]
如果设置了root参数,root参数的值就会被添加到“/”的前面,然后会被css-loader处理
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader?root=./img"
},
...
]
url(/image.png) => url(./img/image.png)
CSS MODULE是一种css in javascript的方式,当我们把一个css文件import到一个js模块时,这个css文件会暴露一个对象,这个对象映射所有的本地和全局css类名 使用css-loader时可以设置modules参数,开启这种模式。
.app{
text-align: center;
}
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader?modules"
},
...
]
._2jCL78eMjlZHws9ajHxlDX{
text-align: center;
}
// 在js中暴露的对象
{app: "_2jCL78eMjlZHws9ajHxlDX"}
通常modules参数还要通过localIdentName的配合来设置css的类名。在上文中我们看到没有设置localIdentName的css编译后是一串随机字符串,可读性很差,因此我们还需要对它的类名进行处理,这就用到了localIdentName 在CSS MODULE中,可以通过给类名设置:local或:global来决定它是否是全局的css类。设置了:local的类会被编译,而设置了:global的类则会被当成是全局的类,不会被编译。
.title{
font-size: 16px;
}
.desc{
text-align: center;
}
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader?modules&&localIdentName=[name]---[local]---[hash:base64:5]"
},
...
]
.app---title---103E5{
font-size: 16px;
}
.app---desc---1LgG2{
text-align: center;
}
:local(.title){
font-size: 16px;
}
:global(.desc){
text-align: center;
}
.app---title---103E5{
font-size: 16px;
}
.desc{
text-align: center;
}
css-loader中集成了压缩工具cssnano,上文的css设置minimize参数后,css会被压缩优化。
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader?minimize"
},
...
]
camelCase参数会为类名新增一个驼峰命名的拷贝,这个参数也需要配合modules参数使用
.my-title{
font-size: 16px;
}
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader?modules&camelCase"
},
...
]
{
my-title:"_3I8_gyz8vp7gOxXNP7ljNv",
myTitle:"_3I8_gyz8vp7gOxXNP7ljNv"
}
设置-XXX参数,css-loader将不会处理某些css功能
css-loader?-url // 不处理 url(...)
css-loader?-import // 不处理 @import
特性
安装
使用
查询参数