vue中调用scss的变量

2019-09-21 22:06:09 阅读：302 来源： 互联网

标签：scss vue vars color primary bgColor 调用 export

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

好了，不慌不慌。

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

简简单单搞定~~

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

标签：scss,vue,vars,color,primary,bgColor,调用,export
来源： https://www.cnblogs.com/hplwc/p/11565026.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue中调用scss的变量