我在 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;
最佳答案
在 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
。
关于vue.js - 使用 vue 的故事书 - SassError : Undefined variable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64719001/
相关文章:
python - 在 matplotlib 中分段更改 x 轴刻度
node.js - Kubernetes Crashloopbackoff 与 Minikube
android - 在 Dart 上将相机从一个屏幕传递到另一个屏幕
css - 使用 Inset 的 React Native Complex Shadow
angular - 从 - "createAction"函数获取类型
github - 避免从 raw.githubusercontent.com 获取缓存内容
perl - 我怎样才能确保函数永远不会在 perl 中同时执行?