首先创建一个全局变量文件 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. 51nod1448(yy)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1448 题意: 中文题诶~ 不过要仔细看题, 原来颜色是被覆盖 ...

  2. Linux之Vim编辑器的使用

    NAME vim - Vi IMproved, a programmers text editor #vi的改进,一个程序文本编辑器 1.移动光标的方法 Ctrl+f 屏幕向下移动一页 0(数字0) ...

  3. Canvas 与 Image 相互转换

    转换 Image为 Canvas 要把图片转换为Canvas(画板,画布),可以使用canvas元素 context 的drawImage方法: 代码如下: // 把image 转换为 canvas对 ...

  4. kuangbin专题十六 KMP&&扩展KMP HDU3613 Best Reward(前缀和+manacher or ekmp)

    After an uphill battle, General Li won a great victory. Now the head of state decide to reward him w ...

  5. centos操作---搭建环境 安装python

    1.安装python3.6.2 安装依赖 yum -y groupinstall "Development tools" yum -y install zlib-devel bzi ...

  6. php 多语言(UTF-8编码)导出Excel、CSV乱码解决办法之导出UTF-8编码的Excel、CSV

    新项目,大概情况是这样的:可能存在多国.不同语种使用者,比喻有中文.繁体中文,韩文.日本等等,开发时选择了UTF-8编码,开发顺利,没有问题.昨天做了一个csv导出功能,导出的东西完全乱了: 设置mb ...

  7. Mybatis学习笔记(六) —— 动态sql

    通过mybatis提供的各种标签方法实现动态拼接sql. 需求:根据性别和名字查询用户 查询sql: SELECT id, username, birthday, sex, address FROM ...

  8. java 常用操作(保留小数位数、int转string，string转int)

    1.保留2位小数 //similarityTemp为double类型,需要保留2位有效数据,利用String.format String strTemp=String.format("%.2 ...

  9. Go语言基础之8--面向对象编程1之结构体（struct）

    一.结构体详解 1.1 声明和定义 1.Go中面向对象是通过struct来实现的, struct是用户自定义的类型 2.Go 语言中数组可以存储同一类型的数据,但在结构体中我们可以为不同项定义不同的数 ...

  10. 24-----BBS论坛

    BBS论坛(二十四) 24.1.编辑板块 cms/js/banners.js $(function () { $('.edit-board-btn').click(function () { var ...