需要安装一个插件:sass-resources-loader

1、执行安装命令:

npm i sass-resources-loader --save-dev

2、修改vue-cli环境下build文件夹下utils.js,找到scss加载位置:

return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

修改为:

return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat({
loader: 'sass-resources-loader', // 为了scss全局变量能在vue文件中使用
options: {
resources: path.resolve(__dirname, './../src/assets/scss/_var.scss')
}
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

3、在_var.scss中定义变量:

// 自定義主題色
$theme-color: #008dfa;

4、在vue组件中使用自定义的变量:

<style lang="scss">
.site-wrapper-main{
box-shadow: inset 0px 0px 1px 0px $theme-color;
}
</style>

[Vuejs] 在vue各个组件中应用全局scss变量的更多相关文章

  1. Vue自定义组件中Props中接收数组或对象

    原文:https://www.jianshu.com/p/904551dc6c15 自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[], ...

  2. vue vue-cli中引入全局less变量的方式

    我们经常用less定义一些全局变量,比如主题的颜色,为了避免在每个组件中引用我首先尝试放在main.js中,发现并不起作用... 先看vue-cli2.x 版本如何解决 1.安装; npm insta ...

  3. vue自定义组件中的v-model简单解释

    在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...

  4. Vue.js 组件中data的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue父组件中调用子组件的方法

    Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...

  6. vue 父组件中调用子组件函数

    2019/06/06 在父组件中调用子组件的方法:  1.给子组件定义一个ref属性.eg:ref="childItem"  2.在子组件的methods中声明一个函数.eg: u ...

  7. vue-cli项目中引入全局scss

    加载一个全局设置文件 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求.比如为所有组件全局使用 scss 变量.为了达成此目的: npm install sass-resour ...

  8. vue-cli中使用全局less变量

    1.执行 vue add style-resources-loader 命令,选择less 2.在 vue.config.js中添加配置,注意将路径更改为自己存放less变量文件的地址 // 全局使用 ...

  9. 在Qt项目中添加全局宏变量来达到按方案编译的目的

    遇到一个需求,需要根据不同需要编译所需程序,本人采用了在QtCreator中建立不同的构建设置,配合宏的方式来实现: 1.在项目-构建设置中,添加构建配置2.在构建步骤里的qmake中的额外参数一栏填 ...

随机推荐

  1. django 之视图层及模板层 04

    目录 视图层 render方法是Template和Contex两个对象的组合使用 JsonResponse对象 CBV及源码分析 CBV 加装饰器的方式 模板层 模板语法传值 模板语法 变量 过滤器( ...

  2. python 的pip安装

    C:\Python27>C:\Python27\Scripts\pip.exe install gevent gevent是安装的模块名

  3. [shell]管道连接的命令判断返回值

    场景: 在bash执行管道连接的命令,需要获取到各个命令的返回值用于判断 在脚本中我们可能需要将执行结果打印到屏幕,同时保存在文件中供后面分析用,写出如下的命令 command 2>&1 ...

  4. jQuery_获取html代码以及更改内容

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  5. Luogu P4709 信息传递 (群论、生成函数、多项式指数函数)

    题意: 题解: 这道题我思路大方向是正确的,但是生成函数推错导致一直WA,看了标程才改对-- 首先一个长为\(m\)的轮换的\(n\)次幂会分裂成\(\gcd(n,m)\)个长为\(\frac{m}{ ...

  6. Docker入门-构建第一个Java程序

    定制镜像 准备一个没有第三方依赖的java web项目,可能参考示例maven结构项目: session-web.war 把该war上传到安装有docker软件的服务器上宿主目录下.在同级目录创建Do ...

  7. MQTT QOS含义

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  8. 191028DjangoORM之多表操作

    一.多表操作之一对多 models.py from django.db import models class Book(models.Model): name = models.CharField( ...

  9. 一次性生产KEY

    keytool -genkey -alias rebuild -keypass rebuild -keyalg RSA -keysize -validity -keystore rebuild.key ...

  10. leetcode-easy-design-155 Min Stack

    mycode   21.48% class MinStack(object): def __init__(self): """ initialize your data ...