css-loader 处理css中路径引用等问题
用于在js中加载css,解释@import和url()
options
- alias: 解析别名
- importLoaders(@import): 在css-loader前应用的loader的数目,默认为0
- Minimize: true or false 是否开启css代码压缩,比如压缩空格不换行
- modules: 是否开启css-module
module.exports = {
...
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {//当css文件中又引用了其他的css的时候,需要设置importLoaders
importLoaders: 1
}
}]
}]
}
};
style-loader 动态把样式写入css
加载的css作为style标签内容插入到html中,以<style></style>形式在html页面中插入css代码
options
- insertAt: 插入位置
- insertInto: 插入到指定的dom
- singleton: true or false,多个样式是否只生成一个<style></style>标签
postcss-loader
postcss-loader:为了浏览器的兼容性,有时候我们必须加上-webkitm, -ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行。postcss是一个CSS的处理平台可以帮CSS实现更多的功能。
用法:
安装 postcss: npm install postcss-loader autoprefixer
配置文件
webpack.config.js:
module: {
rules: [{
test: /\.css$/
loader: 'style-loader!css-loader!postcss-loader'
}]
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')//在postcss-loader中引入autoprefixer插件
]
}
或者
const autoprefixer = require('autoprefixer');
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
plugins() {
return [autoprefixer];
}
}
}]
}]
}
less-style
添加对webpack的LESS支持。当遇到less文件时,先交给less-loader处理,然后交给css-loader,最后交由style-loader处理,然后执行webpack打包
module: {
rules: [{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}]
}
要启用CSS的source map,你需要将sourceMap选项传递给less-loader和css-loader
CSS SourceMap信息文件,里面存储着位置信息。随着代码增多,我们会对代码进行压缩,代码压缩之后进行调bug定位会非常困难,于是引入sourceMap记录压缩前后的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试。简单来说就是记录压缩的翻译文件,通过这个文件可以找到你的对应源码
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: ['style-loader', 'css-loader', {
loader: 'less-loader',
options: {
sourceMap: true
}
}]
}]
}
};
less-loader可用的options:
modifyVars 或 globalVars声明全局变量: {Object},在less使用全局变量时,我们可以定义一个全局变量的文件,然后每次使用时都引用这个文件,显而易见,这个方法很麻烦。less还提供了另外的方法来声明全局变量,即在options.globalVars/options.modifyVars里进行配置。
modifyVars修改全局的less变量, globalVars声明全局的less变量
module.exports = {
...
module: {
test: /\.less$/,
use: [
'style-loader',
'css-loader,
{
loader: 'less-loader',
options: {
midifyVars: {
@bgColor: red; //或者bgColor: red,有没有@都可以
}
/*globalVars: {
@bgColor: red;
}*/
}
}
]
}
};
body {
background-color: @bgColor;//使用时必须有@
}
编译后
body {
background-color: red;
}