原配置
module.exports = {
// 其他配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
}
}
采用这种配置会出现以下情况
index.js
import './index.css'
index.css
@import url("./a.css");
body {
transform: rotate(45deg);
}
a.css
.a {
transform: rotate(60deg);
}
输出样式
.a {
transform: rotate(60deg);
}
body {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
可以看出index.css被autoprefixer成功处理，但index.css中引入的a.css却未被处理
正确配置
module.exports = {
// 其他配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
}
采用正确配置后输出为
.a {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
body {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
