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

Posted 2023-02-19

【中文标题】带有 vue 的故事书 - SassError：未定义的变量

【英文标题】：Storybook with vue - SassError: Undefined variable

【发布时间】：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;

【问题讨论】：

这能回答你的问题吗？ Webpack sass loader does not recognize global variables file

是什么让你认为./src/scss/variables.scss 是自动加载的？我在docs

中没有看到任何支持你的结论的东西

【参考方案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