Nuxt.js SPA安装Storybook后yarn dev报CSS Loader配置错误如何解决

错误原因 #

该报错由css-loader版本不兼容导致：你安装的Storybook依赖v6及以上版本的css-loader，该版本在modules配置中新增了compileType属性，但Nuxt2内置的css-loader版本较低，不识别该配置字段，因此启动时抛出配置校验错误。

解决方案 #

• 第一步：降级css-loader到兼容版本
  Nuxt2支持css-loader v5.x版本，执行以下命令锁定版本：

  yarn add css-loader@5.2.7 --dev
  

• 第二步：（可选）手动覆盖css-loader配置
  若降级后仍存在冲突，在nuxt.config.js中添加以下配置，删除不被支持的compileType属性：

  export default {
    build: {
      extend(config) {
        config.module.rules.forEach(rule => {
          if (rule.test.toString().match(/css|s[ac]ss/)) {
            rule.use.forEach(use => {
              if (use.loader === 'css-loader' && use.options?.modules) {
                delete use.options.modules.compileType
              }
            })
          }
        })
      }
    }
  }
  

• 第三步：清理缓存重启项目
  执行以下命令清理缓存后重新启动：

  rm -rf .nuxt node_modules/.cache
  yarn dev
  

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