Storybook 全局 Scss 变量

Posted 2023-02-19

【中文标题】Storybook 全局 Scss 变量

【英文标题】：Storybook Global Scss variables

【发布时间】：2018-11-23 14:47:19

【问题描述】：

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

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

【问题讨论】：

你有没有想过这个问题？我也有同样的问题。这个线程上的答案根本不适用，因为我可以让 Storybook 阅读 SCSS - 这不是问题。 Storybook 不知道如何读取包含我所有变量和 mixin 的全局 SCSS 文件。您也不能将它们导入 main.js 或 preview.js。

@keyboard-warrior 我也有同样的问题。

【参考方案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;
  ,

希望这对某人有所帮助！

【参考方案2】：

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

对我来说，使用以下配置在.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 然后复制规则 test: /\.sass$/ 的配置，从 Vue CLI 3 检索到这部分配置。

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案5】：

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

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

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