Error: No PostCSS Config found in '/home/react-project/workarea/scss'

Question

我正在尝试使用 webpack 在我的 reactjs 应用程序中加载 scss 文件。这是我的 webpack 代码：

module: { 
 rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader'
    },
  },
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
      'css-loader',
      'postcss-loader',
      'sass-loader',
    ],
  }
 ]
},
plugins: [
 new HtmlWebpackPlugin({
   template: './src/index.html'
 }),
 new MiniCssExtractPlugin({
   filename: devMode ? '[name].css' : '[name].[hash].css',
   chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
 })
]

当我尝试运行时，它会抛出上述错误。

Answer 1

如果您在根目录中有 postcss.config.js 或者如果您有内联选项，这将得到解决，例如

options: {
    plugins: (loader) => [
      require('autoprefixer')({
        browsers: [
          'last 2 versions',
          '> 1%',
        ], // browser options can be configured from https://github.com/browserslist/browserslist
      }),
    ],
  },

Error: No PostCSS Config found in '/home/react-project/workarea/scss'

Error: No PostCSS Config found in '/home/react-project/workarea/scss'

reactjs

sass-loader

webpack-4

postcss-loader