[英]How can I set global Sass variables in Vue with Webpack?
这些是我使用的 Sass 模块的版本:
node-sass@^4
sass-loader@^7
我试图在vue.config.js
文件中设置一个全局 Sass 变量:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `$primaryColor: #16A085;`
}
}
}
}
但是在运行npm run dev
,我收到以下错误:
Module build failed:
color: $primaryColor;
^
Undefined variable: "$primaryColor".
in C:\Users\tomek\Desktop\projekty\projectsBacketlist\noteTakingApp\frontend\noteTakkingApp\src\views\NoteEdit.vue (line 157, column 13)
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-b5e02554","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/NoteEdit.vue 4:14-374 13:3-17:5 14:22-382
@ ./src/views/NoteEdit.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
您的项目不是Vue CLI生成的项目,因此根本不会处理vue.config.js
。
在您的情况下,您将在build/utils.js
配置 Sass 7.x 加载build/utils.js
以传递data
选项:
exports.cssLoaders = function (options) {
//...
return {
//...
sass: generateLoaders('sass', { data: `$primaryColor: #16A085;` }),
scss: generateLoaders('sass', { data: `$primaryColor: #16A085;` }),
}
}
但是,您应该注意sass-loader
文档中的注释:
请注意:由于您正在注入代码,这将破坏您的入口文件中的源映射。 通常有比这更简单的解决方案,比如多个 Sass 入口文件。
我有同样的问题,这是我的解决方案:
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
// scss: generateLoaders('sass'),
scss: generateLoaders('sass', { data: `@import '@/scss/_variables.scss';` }),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
我的文件在“src”中,所以基本上转到顶部并找到文件夹 scss。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.