首先创建一个全局变量文件 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. Python列表知识补充

    1.import this  Python之禅,圣经. >>> import this The Zen of Python, by Tim Peters Beautiful is b ...

  2. Oracle中merge into语法

    merge into 语句就是insert和update的一个封装,简单来说就是: 有则更新,无则插入 下面说怎么使用 MERGE INTO table_Name  T1(匿名) using (另外一 ...

  3. 最短路+状压DP【洛谷P3489】 [POI2009]WIE-Hexer

    P3489 [POI2009]WIE-Hexer 大陆上有n个村庄,m条双向道路,p种怪物,k个铁匠,每个铁匠会居住在一个村庄里,你到了那个村庄后可以让他给你打造剑,每个铁匠打造的剑都可以对付一些特定 ...

  4. cookie和session的使用和区别

    cookie:存储在浏览器 存值:setcookie("名字",值,过期时间.秒,哪一个文件夹)//文件夹不写一般默认整个网站都可以 setcookie("usernam ...

  5. .net mvc 框架实现后台管理系统 2

    layui 数据表格 返回格式: var json = new { code = 0, count = pagers.totalRows, msg = "", data =null ...

  6. P4332 [SHOI2014]三叉神经树(LCT)

    Luogu4332 LOJ2187 题解 代码-Tea 题意 : 每个点有三个儿子 , 给定叶节点的权值\(0\)或\(1\)且支持修改 , 非叶子节点的权值为当有\(>=2\)个儿子的权值为\ ...

  7. jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决

    $("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html" ...

  8. 如何将微信上传AMR格式语音转化为MP3格式

    1. 服务器安装ffmpeg 2. 执行命令 ffmpeg -i {amr_file_path} -f mp3 -acodec libmp3lame -y {mp3_file_path} public ...

  9. TCP并发服务器简单示例

    并发服务器的思想是每一个客户的请求并不由服务器直接处理,而是由服务器创建一个子进程来处理 1. 服务器端 #include <stdio.h> #include <sys/types ...

  10. datetimepicker使用

    常考地址:http://www.bootcss.c 直接上代码: 步骤:1.http://www.bootcss.com/p/bootstrap-datetimepicker/下载包 2.将里面的js ...