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);
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,356评论 0 3
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,335评论 4 31
  • Sass&Gulp 一、sass介绍 (一) SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计...
    锋享前端阅读 1,545评论 0 3
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,518评论 1 32
  • 前言 百日項目,就是花100天做好一件事情。我嘗試過幾個一百天計劃,有成功的:100天瑜伽,100天拿鐵拉花;也有...
    陈哈娜阅读 1,098评论 1 5