故事书Vue与全局Scss变量

时间:2018-06-13 22:17:04

标签: vue.js nuxt.js storybook

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

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

5 个答案:

答案 0 :(得分:0)

您需要在.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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

如果在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应用,而只是在运行这些单独的组件。

答案 3 :(得分:0)

这似乎是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;
  },

希望这对某人有帮助!

答案 4 :(得分: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";',
          },
        },
      ],
    },
  ],
}