专栏名称: 牧羊童鞋

你应该了解真相，真想能够使你自由

相关文章推荐

時間的玩家TimeIsArt · 每日临在 | 2025.02.07 · 20 小时前

惠济发布 · 只需每天坚持10分钟！什么“长寿运动”，比散 ... · 22 小时前

都市频道 · 剧痛，或危及生命！近期多发，有医院不到一周接 ... · 3 天前

信传媒 · 预防流感重症发生听听医生怎么说 · 4 天前

39健康网 · 宝宝出生时“几斤几两”，能暗示智商高低？医生 ... · 4 天前

51好读 › 专栏 › 牧羊童鞋

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

牧羊童鞋 · 简书 · · 2018-03-07 18:21

正文

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

后来看了下 postcss-loader 的文档，以及查阅了一些资料，发现推荐配置如下，重点是需要开启 css-loader 的 importLoaders 选项，以及需要把 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文件体积。可以参考的说法这里