用postcss-loader不识别程序的Webpack

Question

我有一个React应用程序(从create-react- app中弹出)，我正在尝试将PostCSS添加到Webpack配置中。

下面是我的(缩写) webpack.config.js：

...
const postCSSConfig = require('./postcss.config');

module.exports = {
    ...
    module: {
        loaders: [
            ...
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders=1',
                    'postcss-loader'
                ]
            },
            ...
        ]
    },
    postcss: function () {
      return postCSSConfig;
    },
...

这是我的postcss.config.js：

module.exports = {
  plugins: [
    require('precss'),
    require('autoprefixer')
  ]
}

我的文件结构是：

project/
  src/
    assets/
    components/
    styles/
    views/
    index.js
  package.json
  postcss.config.js
  webpack.config.js

当我试图让我的CSS包含PreCSS中的一些特性(比如嵌套和变量)时，它破坏了样式并且不起作用。但是，autoprefixer是有效的。我已经在PreCSS上运行了npm install，并尝试重新排列，但仍然没有成功。任何建议都将不胜感激。

Answer 1

你有没有试着直接把你的后css配置包含到你的webpack配置中？我已经成功地做到了这一点，我真的找不到任何关于postcss.config的文档以及如何正确地编写它们。

module.exports = {
...
  module: {
    loaders: [
     ...
     {
       test: /\.css$/,
       loaders: [
         'style-loader',
         'css-loader?importLoaders=1',
         'postcss-loader'
       ]
     },
     ...
    ]
  },
  postcss: function () {
    return [
      require('precss'),
      require('autoprefixer')
    ];
  }
};