9

CLI 工具：Storybook 框架：Vue/Nuxt

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

4

5 回答 5

4

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;
  },

希望这对某人有帮助！

于 2020-06-06T18:45:41.800 回答
1

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

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

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$/。

于 2019-01-24T11:46:33.590 回答
0

对于实际上可以让 Storybook 读取 SCSS 文件但无法让它读取全局变量文件的任何人，请在您的自定义 webpack 配置中执行此操作：

module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      loaders: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            prependData: '@import "path/to/global.scss";',
          },
        },
      ],
    },
  ],
}
于 2021-07-17T04:31:30.357 回答
0

您需要在故事书中添加 scss 规则以.storybook/webpack.config.js进行解析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

于 2018-12-05T12:27:01.060 回答
-2

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

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

通常你会在src/main.js/中导入样式和插件，src/main.ts但你还需要在 Storybook 配置中执行此操作，因为在运行 Storybook 时，它不会运行整个 Vue 应用程序，而只是运行那些单独的组件。

于 2019-11-24T15:01:53.960 回答