reactjs - Storybook 全局 Scss 变量

Question

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

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

Answer 1

这似乎是一个 issue Storybook 处理多个规则。

我通过变通解决了它。

详细解释可以看我写的博客here .

下面是我的 webpack 配置 - 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;
  },

希望这对某人有帮助!