javascript - 带有 postcss-loader 的 Webpack 无法识别 precss

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

您是否尝试将 post-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')
    ];
  }
};