vue-cli3设置sass/scss全局变量
https://www.cnblogs.com/lonhon/p/9887993.html
sass支持设置全局样式变量,且变量可以计算
vue-cli2怎么设置全局变量网上已有很多方案,这里主要讲下vue-cli3下怎么做
1 准备存放全局样式变量的文件
_variable.scss,内容如下:
$theme-color: #3385ff;
2 配置loader
打开根目录下 vue.config.js
写入
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/styles/_variable.scss";
`
}
}
}
}
3 使用全局变量
现在就可以在每个vue文件中直接使用全局变量了
<template></template>
<script></script>
<style lang="scss" scoped>
button{
color: $theme-color;
}
</style>