美文网首页
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