首先创建一个全局变量文件 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. php 读取excel文件

    首先下载插件PHPExcel (PHPExcel-1.8),以tp5框架为例,将该文件放在verdor文件夹下.然后引入IOFactory文件. 1.读取文件的部分内容(用于固定格式) public ...

  2. Hadoop源码分析之产生InputSplit文件过程

        用户提交 MapReduce 作业后,JobClient 会调用 InputFormat 的 getSplit方法 生成 InputSplit 的信息.     一个 MapReduce 任务 ...

  3. kuangbin专题七 HDU3974 Assign the task （dfs时间戳建树）

    There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...

  4. 微信小程序传数组(Json字符串)到Java后端

    一:小程序端: wxml中代码: <!--index.wxml--> <view> <view> <button bindtap="onShow&q ...

  5. STM32F030 使用硬件 SPI

    前言 以前玩过一点 STM32 单片机(主要是 STM32F103 系列),去年(2017)STM32F1 涨到不知哪里去了,今年好像降下来了.F0 系列相比 F1 系列少了一些功能,最高主频只到 4 ...

  6. 面试题 和 python 2与3的期区别

      1.3 python2与python3的一些区别 大环境下的区别:python2:1,源码都含有php,Java,C,等语言的规范陋习,2,重复代码特别多. python3:源码很规范,清晰,简单 ...

  7. Django 10 GET和POST（HttpRequest对象，GET和POST请求，文件上传，HttpResponse对象的cookie）

    Django 10 GET和POST(HttpRequest对象,GET和POST请求,文件上传,HttpResponse对象的cookie) 一.HttpRequest对象 #HttpRequest ...

  8. Django 07 Django模型基础2 （常用查询和多表关联）

    Django 07 Django模型基础2 (常用查询和多表关联) 一.常用查询 #查找数据 def search_user(request): #获取 rs = User.objects.first ...

  9. C语言中变量、全局变量与变量的作用域

    什么是变量: 变量常量都是表征数据的一种形式:常量用来表示数据的值: 变量不仅可以用来表示数据的值:还可以用来存放数据:因为变量对应着一定的内存单元: 变量和常量必须先定义后使用. 变量名和常量名都是 ...

  10. Kibana6.x.x——启动后的一些警告信息记录以及解决方法

    1.发现的第一个警告信息 server log [06:55:25.594] [warning][reporting] Generating a random key for xpack.report ...