React项目SCSS用composes报错：TypeError: Cannot read property 'postcss' of null

我刚遇到过几乎一模一样的问题，你看到的TypeError: Cannot read property 'postcss' of null本质是postcss-loader在处理样式时，插件配置出现了null值导致的。结合你的配置和代码，我来一步步帮你搞定：

1. 先排查postcss-loader的插件配置问题 #

从报错信息里的loader参数{"plugins":[null]}能看出来，你Webpack配置里postcss-loader的plugins选项实际传入了null。大概率是autoprefixer没正确安装或导入导致的：

• 先确保依赖安装到位：

  npm install autoprefixer --save-dev
  # 用yarn的话：yarn add autoprefixer --dev
  

• 在你的Webpack配置文件顶部，必须正确导入autoprefixer：

  const autoprefixer = require('autoprefixer');
  

2. 推荐改用postcss.config.js管理插件（更稳定） #

把postcss的配置抽离到单独文件里，既能避免和Webpack配置耦合，也能彻底杜绝这类配置错误：

• 在项目根目录创建postcss.config.js文件，内容如下：

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

• 然后修改Webpack中postcss-loader的配置，删掉plugins选项，简化成：

  {
    loader: 'postcss-loader',
    options: { sourceMap: true }
  }
  

3. 确认SCSS的composes语法和路径正确性 #

你的Header/styles.scss里的写法：

.top { 
  &Container { 
    composes: mediaContainer from '../../../public/scss/layout.scss'; 
  } 
}

这段语法是没问题的，会编译成.topContainer类并复用mediaContainer的样式，但要再核对下：

• 从Header/styles.scss到layout.scss的相对路径是否正确
• CSS Modules本身支持跨文件composes，这点不用怀疑

4. 最后验证Webpack loader顺序 #

虽然你的loader顺序看起来是对的（sass-loader最后执行，先转SCSS为CSS，再经postcss-loader和css-loader处理），但再确认下ExtractTextPlugin的配置结构：

{
  test: /\.scss$/,
  include: [
    path.resolve(__dirname, 'client'),
    path.resolve(__dirname, 'node_modules/myproject')
  ],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader', // 开发环境可保留，生产环境会提取成单独CSS文件
    use: [
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          localIdentName: '[local]--[hash:base64:5]',
          importLoaders: 2, // 这个值和后面的postcss、sass loader数量一致，你的配置是对的
        }
      },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      { loader: 'sass-loader' }
    ]
  })
}

做完这些修改后，重新执行构建命令，应该就能解决这个报错了。

内容的提问来源于stack exchange，提问作者Artemii