美文网首页
autoprefixer对@import引入样式不生效的解决方案

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

作者: mosband | 来源:发表于2019-10-14 18:15 被阅读0次

原配置

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

相关文章

网友评论

      本文标题:autoprefixer对@import引入样式不生效的解决方案

      本文链接:https://www.haomeiwen.com/subject/rsxdmctx.html