vue中调用scss的变量

旧街凉风 提交于 2019-11-30 05:53:53

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

好了,不慌不慌。

刚刚捣鼓着我的网站,想着全局来切换 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
        }
    }
}

简简单单搞定~~

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!