Storybook 全局 Scss 变量

Question

CLI 工具：Storybook 框架：Vue/Nuxt

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

Answer 1

您需要在.storybook/webpack.config.jsfor Storybook 中添加 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