使用 webpack postcss-loader

Install

npm i -D postcss-loader

webpack.config.js (recommended)

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

loader 应用顺序

一个匹配规则中可以配置使用多个 loader，即一个模块文件可以经过多个 loader 的转换处理，执行顺序是从最后配置的 loader 开始，一步步往前。例如，一个 css 文件会途径 postcss-loader、css-loader、style-loader 处理，成为一个可以打包的模块。

loader 的应用顺序在配置多个 loader 一起工作时很重要。

postcss 插件

安装

npm install postcss-import  cssnano --save-dev

postcss-import

使用postcss-import插件，遵循@import规则，你可以将reset.css样式合并到你的主样式表中，减少http请求。

@import 'reset.css';

cssnext

Use tomorrow's CSS ,today!
可以在样式表中利用 cssnext 额外增加的一些 css 规范。cssnext 是一个 PostCSS 的包，其中包含了大量的特性组件，比如 custom properties 和 custom selectors。
cssnext 中已经包含了对 Autoprefixer 的使用，因此使用了 cssnext 就不再需要使用 Autoprefixer。

/* custom properties */
:root {
  --heading-color: #ff0000;
}

/* custom selectors */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;

/* usage */
:--headings { 
  color: var(--heading-color);
}

css-mqpacker

css-mqpacker插件可以找到样式表中相同的媒体查询样式合并到一个媒体查询中。这样允许你在写CSS的时候，媒体查询可以重复编写，你也不用担心这样会对你的样式产生冗余代码，而影响你的效率。

cssnano

非常强大的CSS优化的插件包

cssnano优化包括下面一些类型：

删除空格和最后一个分号
删除注释
优化字体权重
丢弃重复的样式规则
优化calc()
压缩选择器
减少手写属性
合并规则

webpack配置

webpack.config.js

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    use: [{
      loader: "css-loader"
    }, {
      loader: 'postcss-loader',
      options:{
        // ident: 'postcss',
        plugins: (loader) =>  [
          require('postcss-import')({ root: loader.resourcePath }),
          require('postcss-cssnext')(),
          require('autoprefixer')(),
          //require('cssnano')()
        ]
      }
    }],
    // 在开发环境使用 style-loader
    fallback: "style-loader"
  })
}