使用webpack

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. autoprefixer（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

带有webpack2的postcss.config.js文件中的

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,
        })
    ],
}

<{1>}文件中的

webpack.base.cinf.js