首先创建一个全局变量文件 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. git配置项目

    1.下载安装完git 2.在git oschina上发布项目 3.管理-公匙管理 4.git上面生成公匙 $ cat ~/.ssh/id_rsa.pub 5.将公匙复制进 git oschina 管理 ...

  2. loj #6485. LJJ 学二项式定理 （模板qwq）

    $ \color{#0066ff}{ 题目描述 }$ LJJ 学完了二项式定理,发现这太简单了,于是他将二项式定理等号右边的式子修改了一下,代入了一定的值,并算出了答案. 但人口算毕竟会失误,他请来了 ...

  3. 搜索【洛谷P2845】 [USACO15DEC]Switching on the Lights 开关灯

    P2845 [USACO15DEC]Switching on the Lights 开关灯 题目背景 来源:usaco-2015-dec Farm John 最近新建了一批巨大的牛棚.这些牛棚构成了一 ...

  4. Django 12 中间件、上下文处理器和admin后台

    Django 12 中间件.上下文处理器和admin后台 一.中间件 #Django中间件 (Middleware) # 一个轻量级.底层的“插件”系统,可以介入Django的请求和响应处理过程,修改 ...

  5. 使用Entity Framwork 保存数据时，提示不能在对象中插入重复键，违反了PRIMARY_KEY约束

    这种情况,大多发生在有外键存在的情况下,解决方法是: 把dataContext.Set<T>().Add(model)修改成dataContext.Models.Add(model);

  6. vs如何在Windows身份验证下调试Web项目

    vs做的Web项目发布到IIS站点后,通常我们还希望利用vs来调试代码.如果Web在IIS中设置成了Windows身份验证,那么我们如何在vs调试的时候,也同样采用Windows身份认证进行调试呢? ...

  7. input只能输入非负数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. MetricStatTimer

    package org.apache.storm.metric.internal; import java.util.Timer; /** * Just holds a singleton metri ...

  9. Asp.net获取系统信息

    [DllImport("kernel32")]        public static extern void GlobalMemoryStatus(ref MEMORY_INF ...

  10. 4.AOP

    1.代理模式 代理模式(Proxy Pattern)是GoF23种常用设计模式之一使用代理模式创建代理对象,让代理对象控制目标对象的访问,并且可以在不改变目标对象的情况下添加一些额外的功能包括静态代理 ...