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

Question

我想使用以下 postCSS 插件：

1. postcssimport ( https://github.com/postcss/postcss-import )
2. postcssnested ( https://github.com/postcss/postcss-nested )
3. postcsssimplevars ( https://github.com/postcss/postcss-simple-vars )
4. postcssmixins ( https://github.com/postcss/postcss-mixins )
5. 自动前缀（https://github.com/postcss/autoprefixer）
6. 丢失（https://github.com/peterramsing/lost）
7. postcssflexibility ( 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.jswebpack2 的文件中

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
    },
   ...
}