具有Vue的故事书-SassError：未定义的变量

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”导入列表

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

如果scss不起作用，则可以通过在preview-head.html上创建config/storybook/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