首先创建一个全局变量文件 global.scss

$theme-color: #efefef;

编辑vue.config.js

module.exports = {

  // ...

  css: {

    loaderOptions: {

      sass: {

        data: `@import "@/styles/global.scss";`

      }

    }

  }

}

现在就可以在任意地方使用global.scss中定义的变量了

Vue-Cli 3 引入 SCSS 全局变量的更多相关文章

  1. vue系列之vue cli 3引入ts

    插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...

  2. vue/cli 3 引入 使用jQuery

    注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.一般安装成功后在packa ...

  3. vue项目中设置全局引入scss，使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  4. vue项目 安装和配置sass & main.js引入scss文件报错

    通过npm 安装 cnpm install --save-dev sass-loader cnpm install --save-dev node-sass 在build文件夹下的webpack.ba ...

  5. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  6. vue cli 常见问题汇总

    以下是本人在用vue cli 开发项目里遇到的最基本的问题及解决方案汇总.没啥很多技术性的东西,各位看个乐呵就行~ 1.vue-cli 创建的项目各文件夹的含义 注意:通过vue-cli 4 创建的项 ...

  7. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  8. Vue技术点整理-Vue CLI

    Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...

  9. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...

随机推荐

  1. cuda&vs2010的属性配置

    平时总需要新建工程,但是却总忘记该修改哪里,于是寻找了官方的项目,截下其中的属性修改图. 1 2 3 4 5 6 7 8 9 10 11

  2. P1900 自我数

    题意: 对于每一个正整数n,我们定义d(n)为n加上它每一位数字的和. 例如,d(75)=75+7+5=87.给定任意正整数n作为一个起点,都能构造出一个无限递增的序列:n, d(n), d(d(n) ...

  3. linux物理内存管理

    1.为什么需要连续的物理内存: Linux内核管理物理内存是通过分页机制实现的,它将整个内存划分成无数个4k(在i386体系结构中)大小的页,从而分配和回收内存的基本单位便是内存页了.利用分页管理有助 ...

  4. 老男孩python作业3-购物车程序优化

    购物车优化要求:用户入口: 1.商品信息存在文件里 2.已购商品,余额记录.第一次启动程序时需要记录工资,第二次启动程序时谈出上次余额 3.允许用户根据商品编号购买商品 4.用户选择商品后,检测是否够 ...

  5. C语言中一些术语的梳理_持续更新

    关键字.标识符.宏.预定义.预处理.编译.替换.预处理指令. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 标识符: ...

  6. form组件之modelForm

    modelForm的使用及参数设置 从modelForm这个名字就能看出来,这个form是和模型类model有知己诶关联的,还是以数和出版社的模型来说明: models.py(模型) from dja ...

  7. 修改jupyter notebook的默认浏览器

    1.打开命令行 2.输入jupyter notebook --generate-config 3.显示出jupyter_notebook_config.py 文件所在的目录.按文件目录找到这个文件. ...

  8. c++判断两字符串是否相等

    正确写法: 头文件: #include<string.h> if(strcmp(str.c_str(),str1.c_str())==0) 注意:以下写法在提交到 vj 全是错 if(st ...

  9. 搭建python开发环境

    1.下载python3.6并安装 .网址:https://www.python.org/downloads/windows/ 安装完在cmd看输入“python"是否能够出现python版本 ...

  10. java——时间复杂度、动态数组

    O(n)不一定小于O(n^2),要具体来看,而我们说的这种时间复杂度其实是渐进时间复杂度,描述的是n趋近于无穷的情况. 动态数组的时间复杂度: 添加操作:O(n) addLast()的均摊复杂度为O( ...