如何解决Nuxt.js项目运行Storybook时postcss-loader的注释相关报错

AI 小北

2026-9-25

错误原因

该报错是你手动添加的SCSS处理规则和Storybook内置的默认样式处理规则、Vue文件自带的样式处理逻辑冲突导致的：样式文件被重复经过loader链处理，css-loader处理后输出的JS代码被后续的postcss-loader当作CSS代码解析，无法识别JS语法的// Imports注释，因此抛出Unknown word的语法错误。

解决方案

步骤1：调整Storybook的webpack配置

修改./storybook/webpack.config.js，先排除默认CSS规则对SCSS/SASS文件的处理，再添加自定义的SCSS处理规则，参考配置如下：

module.exports = {
  webpackFinal: async (config) => {
    // 过滤默认CSS规则，避免其处理SCSS/SASS文件
    config.module.rules = config.module.rules.map(rule => {
      const testStr = rule.test.toString()
      if (testStr.includes('css') && !testStr.includes('scss') && !testStr.includes('sass')) {
        return {
          ...rule,
          exclude: /\.s[ac]ss$/i
        }
      }
      return rule
    })

    // 添加自定义SCSS处理规则
    config.module.rules.push({
      test: /\.s[ac]ss$/i,
      exclude: /node_modules/,
      // 排除Vue文件内部的style块，避免和vue-loader处理逻辑冲突
      resourceQuery: { not: [/vue/] },
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    })

    return config
  }
}

步骤2：补充全局SCSS资源注入（可选）

如果项目存在全局注入的SCSS变量/混合宏，需要在sass-loader的配置中补充对应注入逻辑，避免组件内使用全局变量时报错，参考配置如下：

// 仅需要全局注入SCSS资源时添加该配置
{
  loader: 'sass-loader',
  options: {
    // sass-loader v10+ 使用 additionalData，v8及以下版本替换为 prependData
    additionalData: `@import "~@/assets/styles/global.scss";`
  }
}