1 准备存放全局样式变量的文件
_variable.scss,内容如下:
$theme-color: #3385ff;
2 配置loader
打开根目录下 vue.config.js
写入
module.exports = {// ...css: {loaderOptions: {sass: {prependData: `@import "@/assets/styles/_variable.scss";`}}}}
3 使用全局变量
现在就可以在每个vue文件中直接使用全局变量了
<template></template><script></script><style lang="scss" scoped>button{color: $theme-color;}</style>