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')
    ];
  }
};

带有postcss-loader的Webpack无法识别

1 个答案: