vue.js - 使用 vue 的故事书 - SassError : Undefined variable

Question

我在 Vue 中使用故事书。我有一些我想使用的通用 SCSS。

I am using the addon in **main.js**

  addons: [

    '@storybook/preset-scss'
  ],

这似乎会自动获取 ./src/scss/variables.scss 我添加的用于测试

body {
  border: 10px solid green;
}

这也适用于热重载，问题是在我的组件中找不到任何变量。

所以我的故事 list.stories.js 导入了列表组件

从 '../components/List.vue' 导入列表

但在样式 block 中，我尝试使用 variables.scss 中的 var。

<style lang="scss" scoped>
.list {
  border: 1px solid  $light-blue;
 
}
</style>

得到错误

SassError: Undefined variable: "$light-blue".
        on line 204 of components/src/components/List.vue
>>   border: 2px solid  $light-blue;

Answer 1

在 main.js 中添加 sass-loader 到 webpack 配置:

module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      loaders: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: '../src/scss/variables.scss',
          },
        },
      ],
    });
    return config;
  }
}

它适用于已安装的 css-loader@5、sass-loader@10 和 style-loader@2。