原生WebComponents项目：如何在Storybook中导入SCSS为文本字符串？

问题核心是Storybook默认的webpack配置会将SCSS编译后注入DOM或生成样式文件，而非导出为字符串，需要修改webpack规则实现目标效果，以下是两种可行方案：

方案1：使用raw-loader + sass-loader #

先通过sass-loader编译SCSS为CSS，再用raw-loader将CSS转为字符串导出。

1. 安装依赖：

npm install raw-loader sass-loader sass --save-dev

2. 修改Storybook配置文件（.storybook/main.js/.storybook/main.ts）：

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-scss"],
  webpackFinal: async (config) => {
    // 移除原有SCSS规则避免冲突
    config.module.rules = config.module.rules.filter(
      rule => !(rule.test instanceof RegExp && rule.test.test('.scss'))
    );

    // 添加新规则，将SCSS编译为字符串导出
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'raw-loader',
        {
          loader: 'sass-loader',
          options: {
            sassOptions: {
              // 可选：添加全局变量、路径映射等SCSS配置
            }
          }
        }
      ],
      exclude: /node_modules/
    });

    return config;
  }
};

方案2：利用webpack 5 css-loader的exportType配置 #

webpack 5的css-loader支持直接通过配置导出CSS字符串，无需额外安装raw-loader。

1. 确保依赖安装：

npm install css-loader sass-loader sass --save-dev

2. 修改Storybook配置文件：

module.exports = {
  // ...其他基础配置
  webpackFinal: async (config) => {
    // 移除原有SCSS规则
    config.module.rules = config.module.rules.filter(
      rule => !(rule.test instanceof RegExp && rule.test.test('.scss'))
    );

    // 添加新规则
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: 'css-loader',
          options: {
            exportType: 'string'
          }
        },
        'sass-loader'
      ],
      exclude: /node_modules/
    });

    return config;
  }
};

额外注意 #

• 若存在全局样式需要正常注入DOM，可给组件SCSS文件加专属后缀（如.component.scss），修改规则的test为/\.component\.scss$/，只针对组件样式启用字符串导出。
• 修改配置后需重启Storybook，确保配置生效。

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