autoprefixer对@import引入样式不生效的解决方案

原配置

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);
}