与 webpack 一起使用时的 PostCSS 插件顺序

Question

我想使用以下 postCSS 插件：

postcssimport (https://github.com/postcss/postcss-import)
postcss 嵌套 (https://github.com/postcss/postcss-nested)
postcsssimplevars (https://github.com/postcss/postcss-simple-vars)
postcssmixins (https://github.com/postcss/postcss-mixins)
自动前缀器 (https://github.com/postcss/autoprefixer)
丢失 (https://github.com/peterramsing/lost)
postcss 灵活性 (https://github.com/7rulnik/postcss-flexibility)

但是我不确定我应该把它们放在里面的顺序

postcss: function () {
  return [postcssimport, postcssnested, ...];
}

有什么帮助吗？

Answer 1

这是我目前正在处理的项目中的一个示例：

webpackConfig.postcss = () => {
  return [
    atImport({
      addDependencyTo: webpack
    }),
    webpackPostcssTools.prependTildesToImports,
    customProperties({
      variables: map.vars
    }),
    customMedia({
      extensions: map.media
    }),
    customSelectors({
      extensions: map.selector
    }),
    normalize,
    mixin,
    cssnext,
    rucksack,
    sorting,
    short
  ]
}

您应该始终先导入，然后是带有选项的 webpack postcss 工具。然后是你的 postcss 附加组件。

随时查看我正在做的项目：https://github.com/codetony25/react-starter-boilerplate

哦，我也想直接回答你的问题。在您的情况下，它应该首先进入 postcssimport。然后其余的似乎是附加组件，因此顺序无关紧要。

Answer 2

在 postcss.config.js 文件中使用 webpack2

var path = require('path')

module.exports = {
    plugins: [
        require('postcss-nested'),
        require('postcss-import')({
            path: path.join(__dirname, '../../'),
        }),
        require('postcss-cssnext')({
            browsers: [
                'last 2 versions',
                'iOS >= 7',
                'Android >= 4.0',
            ],
        }),
        require('postcss-flex-fallback')(),
        require('postcss-px2rem')({
            remUnit: 75,
        })
    ],
}

在 webpack.base.cinf.js 文件中

const vueLoaderConfig = require('./vue-loader.conf')

module: {
   rules: [
   ...
     {
       test: /\.vue$/,
       loader: 'vue-loader',
       options: vueLoaderConfig
    },
   ...
}

与 webpack 一起使用时的 PostCSS 插件顺序

PostCSS plugin order when using with webpack

webpack

postcss