Storybook 全局 Scss 变量 [英] Storybook Global Scss variables

问题描述

CLI 工具:故事书框架:Vue/Nuxt

CLI Tool: Storybook Framework: Vue/ Nuxt

问题:我正在尝试将全局 SCSS 变量引入 Storybook Stories，以便它们以与 Nuxt 中相同的方式运行组件，我尝试使用 sass-resources-loader 自定义 webpack 配置，但没有成功，只是想看看有没有其他人已经解决了这个问题

Issue: I'm trying to pull in global SCSS variables to Storybook Stories so they run the components the same way as they do in Nuxt, I've tried the custom webpack config with sass-resources-loader but had no luck, just wanted to check if anyone else has already solved this problem

推荐答案

这似乎是一个处理多个规则的 Storybook 问题.

我通过变通解决了这个问题.

详细解释可以阅读我写的博客 此处.

You can read the blog i wrote for detailed explaination here.

下面是我的 webpack 配置 - main.js :

Below is my webpack config - main.js :

webpackFinal: async (config, { configType }) => {
    config.module.rules.map((rule) => {
      if (rule.oneOf) {
        rule.oneOf = rule.oneOf.slice().map((subRule) => {
          if (subRule.test instanceof RegExp && subRule.test.test('.scss')) {
            return {
              ...subRule,
              use: [
                ...subRule.use,
                {
                  loader: require.resolve('sass-resources-loader'),
                  options: {
                    resources: [
                      path.resolve(__dirname, '../src/styles/_common.scss')
                    ]
                  }
                }
              ],
            }
          }
          return subRule;
        });
      }
      return rule;
    });
    return config;
  },

希望这对某人有所帮助！

这篇关于Storybook 全局 Scss 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！