Storybook 中的全局 SCSS 变量导入：两种实用方法

在 Storybook 中导入全局 SCSS 变量

前言

Storybook 是一款强大的工具，可帮助你隔离和测试 UI 组件。通过导入全局 SCSS 变量，你可以确保你的组件在 Storybook 中以相同的方式运行，就像它们在应用程序中运行一样。这可以简化开发和维护工作。

方法 1：使用 sass-resources-loader

sass-resources-loader 是一款 Webpack 加载器，可让你从单独的文件导入 SCSS 变量。要在 Storybook 中使用它，请在 webpack.config.js 文件中添加以下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                './path/to/global-variables.scss',
              ],
            },
          },
        ],
      },
    ],
  },
};

方法 2：使用 webpackFinal 钩子

Storybook 的 webpackFinal 钩子允许你修改其 Webpack 配置。要在 Storybook 中使用此方法，请在 .storybook/main.js 文件中添加以下代码：

module.exports = {
  webpackFinal: async (config) => {
    // 添加 sass-resources-loader 到 Webpack 配置
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              './path/to/global-variables.scss',
            ],
          },
        },
      ],
    });

    return config;
  },
};

结论

通过遵循这两种方法中的一种，你可以轻松地将全局 SCSS 变量导入 Storybook。这将确保你的组件在开发和测试过程中始终以一致的方式呈现。

常见问题解答

1. 为什么我在导入全局 SCSS 变量后仍然无法看到更改？

   • 确保你的 SCSS 文件已正确导入，并且 Webpack 配置已正确更新。

2. 我可以同时使用这两种方法吗？

   • 不，这两种方法不可互用。请选择一种方法并按照说明操作。

3. sass-resources-loader 有什么其他可用的选项？

   • sass-resources-loader 提供了其他选项，如监视和缓存，可以在其文档中找到。

4. 我可以在 Storybook 中使用 LESS 变量吗？

   • 可以，只需使用 less-loader 而不是 sass-resources-loader。

5. 如何管理全局 SCSS 变量的冲突？

   • 在不同的组件和模块中使用命名空间或前缀变量名来避免冲突。