Vue.js vue-SassError的故事书:未定义的变量
我正在将storybook与Vue一起使用。我有一些常用的SCS我想用Vue.js vue-SassError的故事书:未定义的变量,vue.js,sass,storybook,Vue.js,Sass,Storybook,我正在将storybook与Vue一起使用。我有一些常用的SCS我想用 I am using the addon in **main.js** addons: [ '@storybook/preset-scss' ], 这似乎会自动拾取我为测试添加的/src/scss/variables.scss body { border: 10px solid green; } 这是可行的,热重新加载也是问题是在我的组件中找不到任何变量 因此,my story list.stor
I am using the addon in **main.js**
addons: [
'@storybook/preset-scss'
],
这似乎会自动拾取我为测试添加的/src/scss/variables.scss
body {
border: 10px solid green;
}
这是可行的,热重新加载也是问题是在我的组件中找不到任何变量
因此,my story list.stories.js导入列表组件
从“../components/List.vue”导入列表
但是在样式块中,我尝试使用variables.scss中的var
<style lang="scss" scoped>
.list {
border: 1px solid $light-blue;
}
</style>
如果
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 dev服务器<代码>npm运行故事书:服务
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/media-screen.css">