Storybook 全局 Scss 变量

Question

命令行工具: Storybook 框架: Vue/ Nuxt

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

- Alan Fitzpatrick

---

你解决了吗？我也遇到了同样的问题。这个帖子中的所有答案都不适用，因为我可以让Storybook读取SCSS - 这不是问题所在。Storybook不知道如何读取包含所有变量和mixin的全局SCSS文件。你也不能将它们导入到main.js或preview.js中。 - keyboard-warrior

@keyboard-warrior 我完全有同样的问题。 - Abbas

Answer 1

看起来Storybook在处理多个规则时存在问题。

我通过一种变通方法解决了它。

您可以阅读我写的博客，以获取详细的解释在这里。

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

希望这对某人有所帮助！

- NiRUS

Answer 2

我遇到了一个问题，全局SASS变量导致Vue的Storybook失败。

对我而言，在.storybook文件夹中创建一个webpack.config.js文件，并使用以下配置解决了我的问题：

module.exports = (storybookBaseConfig, configType, defaultConfig) => {

  defaultConfig.module.rules.push(
    {
      resourceQuery: /module/,
      use: [
        {
          loader: 'vue-style-loader',
          options: {
            sourceMap: false,
            shadowMode: false
          }
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: false,
            importLoaders: 2,
            modules: true,
            localIdentName: '[name]_[local]_[hash:base64:5]'
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: false
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: false,
            indentedSyntax: true,
            data: '@import "@/sass/_variables.scss";'
          }
        }
      ]
    }
  );

  return defaultConfig;
};

请注意，data: '@import "@/sass/_variables.scss";' 这一行需要与项目中包含变量的SASS文件的文件路径匹配。

这个配置部分是通过运行 vue inspect > output.js 命令从Vue CLI 3中检索到的，并复制了规则 test: /\.sass$/ 的配置。

- Jon Keeping

Answer 3

对于那些能够让Storybook读取SCSS文件但无法读取全局变量文件的人，可以在自定义的webpack配置中执行以下操作：

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      loaders: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            prependData: '@import "path/to/global.scss";',
          },
        },
      ],
    },
  ],
}

- Abbas

Answer 4

您需要在您的 .storybook/webpack.config.js 文件中添加 scss 规则，以便 Storybook 解析 scss。

const path = require('path');
const scss = {
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    'sass-loader'
  ],
};
module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push(scss);

  return defaultConfig;
};

您可能还需要安装适当的加载器： yarn add -D vue-style-loader sass-loader css-loader

- Tnc Andrei

Answer 5

如果您的组件在 Storybook 组件浏览器 UI 中运行时未应用样式，请在主 Storybook config/storybook/config.js 中导入 SASS 样式（在以前的版本中默认为 storybook/config.js），如下所示：

// Import Styles
import '../../src/assets/styles/index.scss';

通常你会在 src/main.js / src/main.ts 中导入样式和插件，但你也需要在 Storybook 的配置中这样做，因为在运行 Storybook 时，它并没有运行整个 Vue 应用程序，而只是这些独立的组件。

- ux.engineer