vue中调用scss的变量

毕业季,毕业设计题目不知道选啥好怎么办啊啊啊~~~

好了,不慌不慌。

刚刚捣鼓着我的网站,想着全局来切换 css 样式来进行主题颜色的改变。然后,我就想在 js 里面获取我设置的 scss 的全局变量。好了,记一下怎么拿到的。

一、在 scss 文件中用 :export 写入你要获取的变量名:

// vars.scss

$color-primary: #3c8dbc;
$bg: #ffffff;

:export {
  colorPrimary: $color-primary;
  bgColor: $bg;
}

二、之后再你要导入的文件中引入这个文件:

import styles from '../assets/css/vars.scss'

export default {
    data () {
        return {
            bgColor: styles.bgColor
        }
    }
}

简简单单搞定~~

可是主题改变还是有点头痛,再试试~~

上一篇:图框变色 实现


下一篇:web前端入门到实战:30行JS和30行CSS代码实现一个进度条组件