带有 vue 的故事书 - SassError：未定义的变量答案

【问题标题】：Storybook with vue - SassError: Undefined variable带有 vue 的故事书 - SassError：未定义的变量
【发布时间】：2021-02-19 10:41:53
【问题描述】：

我正在使用带有 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'导入列表

但在样式块中，我尝试使用 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;

【问题讨论】：

【解决方案1】：

如果scss 不起作用，那么您可以通过在config/storybook/preview-head.html 创建preview-head.html 文件来加载样式

然后在那里加载你的 CSS。例如：

<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/media-screen.css">

确保重新启动 Storybook 开发服务器。 npm run storybook:serve

【讨论】：