我有一个使用 Vue CLI 3.0.4 的新 VueJs 项目支架
我想在所有组件中使用 SCSS 变量,而不必在所有组件中导入 _variables.scss
。
我想导入 _variables.scss ,我发现可以通过使用 sass-resource-loader 来完成。
我查看了这里的所有答案,所有答案都已过时,因为它们不适用于 vue-loader 15。
所以在 vue.config.js
中我有以下内容:
var path = require('path');
module.exports = {
chainWebpack: (config) => {
config.module
.rule('sass')
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
resources: [
path.resolve('./src/scss/config/_variables.scss'),
]
})
}
}
当我运行此程序时,出现以下错误:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Undefined variable: "$brand-color".
in C:\dev\git\vue-typescript-test\src\components\HelloWorld.vue (line 60, column 10)
Helloworld.vue 组件中使用了 $brand-color 变量,因此它不会添加变量。
我似乎无法理解为什么它不起作用,因为我严格按照 Vue CLI 中的文档进行操作。
我还想指出,我遵循了此处选择的答案:Vue CLI 3 sass-resources-loader - Options.loaders undefined
非常感谢任何帮助。
谢谢!
最佳答案
使用以下代码片段应该可以工作。
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/scss/config/_variables.scss";`
}
}
}
};
Note that @ is a shortcut to access the src folder.
不要忘记安装 node-sass
和 sass-loader
。
npm install --save-dev node-sass sass-loader
最后,将 lang
属性添加到 style
标记中。
<style lang="scss">
// some style...
</style>
关于javascript - 如何在 Vue CLI 3.04 上使用 sass-resource-loader 为所有 Vue 组件加载 _variables.scss 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52629791/