执行yarn run storybook报错：Module parse failed: Unexpected character '@'

嘿，这个问题我之前帮朋友排查过，本质是你的Vue组件里的样式代码用了预处理器语法（比如SCSS的变量/嵌套，或者用@import导入样式），但Storybook的Webpack配置没让vue-loader调用对应的预处理器loader来解析这些@符号。结合你用的Storybook 5.2.3和Webpack 4.41.0，给你一套具体的解决步骤：

1. 先安装必要的预处理器依赖 #

假设你的组件用的是SCSS（如果是LESS就换对应的包），执行以下命令安装兼容Webpack 4的loader版本：

yarn add -D sass-loader@^9 node-sass@^4 css-loader style-loader

注意：Webpack 4不支持太高版本的sass-loader，所以指定@^9和node-sass@^4避免版本兼容问题。如果用LESS，把sass-loader换成less-loader，node-sass换成less即可。

2. 修改Storybook的Webpack配置 #

在项目根目录的.storybook/webpack.config.js文件里（如果没有就新建一个），添加对Vue样式预处理器的支持：

const path = require('path');

module.exports = async ({ config, mode }) => {
  // 找到已有的Vue-loader规则
  const vueRule = config.module.rules.find(rule => rule.test.test('.vue'));
  
  // 给vue-loader配置样式预处理器的loader链
  if (vueRule) {
    const vueLoader = vueRule.use.find(use => use.loader === 'vue-loader');
    if (vueLoader) {
      vueLoader.options = {
        ...vueLoader.options,
        loaders: {
          scss: ['style-loader', 'css-loader', 'sass-loader'],
          // 如果用LESS就改成这行：less: ['style-loader', 'css-loader', 'less-loader']
        }
      };
    }
  }

  // 额外添加对单独.scss文件的解析规则（如果项目里有单独的样式文件）
  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../')
  });

  return config;
};

3. 检查Vue组件的style标签 #

确保你的Vue组件里的style标签指定了对应的预处理器语言，比如：

<template>
  <!-- 组件模板 -->
</template>

<script>
// 组件脚本
</script>

<style lang="scss">
/* 这里用SCSS语法，比如$color: red; */
body {
  color: $color;
}
</style>

如果没加lang="scss"，vue-loader会把它当成普通CSS解析，自然识别不了@开头的SCSS语法。

4. 额外排查点 #

• 如果你的项目用了CSS Modules，需要在css-loader的options里开启modules: true，比如把css-loader改成css-loader?modules或者在options里配置。
• 重启Storybook服务，确保配置生效——有时候修改Webpack配置后需要重启才能加载新规则。

按照上面的步骤操作，应该就能解决这个解析错误了。

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