[Vuejs] 在vue各个组件中应用全局scss变量
需要安装一个插件: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变量的更多相关文章
- Vue自定义组件中Props中接收数组或对象
原文:https://www.jianshu.com/p/904551dc6c15 自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[], ...
- vue vue-cli中引入全局less变量的方式
我们经常用less定义一些全局变量,比如主题的颜色,为了避免在每个组件中引用我首先尝试放在main.js中,发现并不起作用... 先看vue-cli2.x 版本如何解决 1.安装; npm insta ...
- vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
- Vue.js 组件中data的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue父组件中调用子组件的方法
Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...
- vue 父组件中调用子组件函数
2019/06/06 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: u ...
- vue-cli项目中引入全局scss
加载一个全局设置文件 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求.比如为所有组件全局使用 scss 变量.为了达成此目的: npm install sass-resour ...
- vue-cli中使用全局less变量
1.执行 vue add style-resources-loader 命令,选择less 2.在 vue.config.js中添加配置,注意将路径更改为自己存放less变量文件的地址 // 全局使用 ...
- 在Qt项目中添加全局宏变量来达到按方案编译的目的
遇到一个需求,需要根据不同需要编译所需程序,本人采用了在QtCreator中建立不同的构建设置,配合宏的方式来实现: 1.在项目-构建设置中,添加构建配置2.在构建步骤里的qmake中的额外参数一栏填 ...
随机推荐
- 【LuoguP4887】第十四分块(前体)
题目链接 题意 区间两数异或在二进制下有 \(k\) 个 \(1\) 的对数. Sol 普通莫队的话,如果要实时维护好区间内的答案需要支持区间对一个数求答案. 直接做不是很好做,容易发现其实这也就是一 ...
- 【Winform-GataGridView】根据DataGridView中的数据内容设置行的文字颜色、背景色 — 根据状态变色
C#中可以根据每行内容的不同来对DataGridView数据表格控制每行的文字颜色.背景颜色进行不同的设置. 效果如下: 实现: 在DataGridView的RowPrePaint事件中进行行颜色控制 ...
- C# 扩展方法——获得枚举的Description
其他扩展方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html /// <summary> /// 扩展方法,获得枚举的Descrip ...
- 查看服务的cpu gpu各类内存 cpu频率等等信息
Linux版本cat /etc/redhat-releasecat /etc/lsb-release内核版本号cat /proc/version查看CPU信息(型号)cat /proc/cpuinfo ...
- docker部署war+tomcat8
注意:本文只是将jenkins.war作为一个war包来操作,实际上要使用jenkins还要同时安装git.maven等. 1.购买阿里云服务器(Ubuntu 18.04), 设置密码,root+pa ...
- H5 video全屏与取消全屏兼容
H5 video全屏与取消全屏各浏览器兼容, requestFullscreen()全屏方法,exitFullscreen()退出全屏方法.兼容各个浏览器与css3兼容一样加个前缀即可. // 全屏 ...
- jmxtrans + OpenTSDB + granafa 监控套件使用手册
需求说明 编写背景 此手册的基础在于对<jmxtrans + influxdb + granafa 监控套件使用手册>的熟悉和使用.本手册仅介绍以下几项: OpenTSDB 的配置安装 对 ...
- Java程序,JVM之间的关系
java程序是跑在JVM上的,严格来讲,是跑在JVM实例上的.一个JVM实例其实就是JVM跑起来的进程,二者合起来称之为一个JAVA进程.各个JVM实例之间是相互隔离的. 每个java程序都运行于某个 ...
- Java权限管理
基于角色的权限管理
- 后盾网lavarel视频项目---模型一对多关联简单实例
后盾网lavarel视频项目---模型一对多关联简单实例 一.总结 一句话总结: 在模型中定义一个方法来设置一对多关联:return $this->hasMany(Video::class); ...