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

【问题标题】：Webpack with postcss-loader not recognizing precss带有 postcss-loader 的 Webpack 无法识别 precss
【发布时间】：2017-03-01 01:53:21
【问题描述】：

我有一个 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 并尝试重新排列东西，但仍然没有运气。任何建议将不胜感激。

【问题讨论】：

断线时的错误是什么？
@AdamWolski 没有错误，CSS 只是不支持嵌套（和其他 precss 的东西）。
尝试从您的配置中删除 postcss 字段。插件应自行查找文件。

标签： javascript css webpack postcss

【解决方案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')
    ];
  }
};

【讨论】：