reactjs - 故事书全局Scss变量

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

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

最佳答案

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

我通过解决解决了它。

您可以阅读我写的博客，以获得详细的说明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;
  },

希望这对某人有帮助!