原配置
module.exports = {
// 其他配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
}
}
采用這種配置會出現(xiàn)以下情況
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);
}
