美文网首页首页投稿(暂停使用,暂停投稿)
autoprefixer对@import方式引用css文件无效的

autoprefixer对@import方式引用css文件无效的

作者: 牧羊童鞋 | 来源:发表于2018-03-07 18:21 被阅读111次

    今天项目中使用了postcss-loader、外加autoprefixer插件,后来发现这个对@import方式引用进来的css没有添加前缀

    后来看了下postcss-loader的文档,以及查阅了一些资料,发现推荐配置如下,重点是需要开启css-loaderimportLoaders选项,以及需要把postcss-loader放在css-loader之后,其他css插件sass|less|stylus-loader之前,问题就解决了,完全不需要postcss-import插件。

    webpack.config.js (recommended)

    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              'style-loader',
              { loader: 'css-loader', options: { importLoaders: 1 } },
              'postcss-loader'
            ]
          }
        ]
      }
    }
    

    PS: @import方式引用css有一个缺点,那就是多次引用会存在多份重复的css,增大css文件体积。可以参考的说法这里

    相关文章

      网友评论

        本文标题:autoprefixer对@import方式引用css文件无效的

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