vue 全局颜色变量设定(cli4.x)

原创 已于 2022-02-28 13:57:07 修改 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2022-02-28 13:55:47 首次发布
本文详细指导如何在Vue CLI 4.x中创建并应用全局SCSS变量，涉及新建变量文件、配置vue.config.js以及解决常见问题，确保代码风格一致性。

vue-cli4.x 使用SCSS全局变量设定

一. 新建全局css变量

1.新建assets/css/variable.scss文件
2.编辑内容–如下为常用的颜色全局变量
在这里插入图片描述

二.css文件设定全局

3.找到vue.config.js
4.编辑如下内容
在这里插入图片描述

三.小注意

  1. 我将variable.scss文件 放置在app.vue文件中,但是不生效.后来使用了如上办法才好.也不知道是什么原因
  2. vue.config.js文件里的设定是根据脚手架版本会有不同的设定.所以以上只会在cli4.x版本下生效.
  3. 如果以上问题都没有,但还是会报错.要重启项目

越简单的事情就越要仔细

Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色（保姆级教程，简易且标准全局替换主题色）
🏆 前端领域优质创作者
07-06 1万+
vueelementui实现更换主题颜色，vue怎么把element组件库的默认的蓝色主题改成其他颜色，vueelement组件库默认蓝色主题更换为其他颜色，vue更改element组件库主题色的超详细教程，vue项目全局修改element-ui的样式/主题颜色，vue-element换肤所有主题色和基础色均可自主配置，vue中修改elementplus主题色，vueelementUI主题颜色切换，vue中自定义element-ui组件库的主题颜色，vue使用elementUI饿了么改
Vue教程｜搭建vue项目｜Vue-CLI2.x 模板脚手架
baidu_21035953的博客
11-29 1628
通过实战方式，介绍基于Vue-CLI2.x 模板脚手架搭建vue2.x项目的完整构建过程，从环境搭建、脚手架搭建到脚手架构建项目，另外分享了工程结构各文件的具体用途，方便大家了解和掌握
vue定义全局颜色变量
moon_tang的博客
07-28 8212
1、新建一个style文件夹，然后里面再新建一个baseColor.scss文件，里面定义全局颜色变量 2、在 build 文件夹中找到utils.js文件，将它的**scss: generateLoaders(‘sass’)**修改为 scss: generateLoaders('sass').concat( { loader: 'sass-resources-...
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。 傻瓜式引用 在每个用到全局变量的组件都引入该全局样式文件 @import 'path/fileName.scss' 但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。 sass-r
vue 设置全局变量的颜色
strong90的博客
09-02 8394
版本 vue cli 2.6.0 方式1： 在工程根目录下，创建vue.config.js 内容如下： module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { // 所以这里假设你有 `src/variables.scss` 这个文件 ...
vue 项目配置全局主题色
qq_41821445的博客
05-24 533
创建 vue 组件，将定义 css 变量的步骤放在一个单独的组件中，在 app.vue 页面去引用，进而应用全局。hexToRgb方法是将 hex 色值转为 rgb 类型，rgb 类型可调透明度。其中isHexColor方法是用来判断当前色值是否是#开头的 hex色值，2.在 app.vue 中引用组件并传入色值变量。这是最近刚学到的一种便捷操作，简直不要太方便。3.然后你在页面中就可以直接使用。利用 css 变量实现。
浅谈vue-cli 3.0.x 初体验
08-27
在多环境配置方面，Vue CLI 3.0.x 支持 `.env` 文件系统，允许你为不同环境（如开发、测试和生产）设置不同的变量。默认情况下，`.env.development`、`.env.production` 和 `.env.test` 分别对应开发、生产和测试...
VUE-CLI配置全局SCSS变量
陈小白
09-20 691
sass-loader版本问题引发的错误：options has an unknown property 'prependData'. These properties are valid。
精选资源
vue-cli4使用全局less文件中的变量配置操作
01-18
vue-cli4的配置方法如下： 安装 style-resources-loader npm i style-resources-loader -D 在 vue.config.js 中加上如下配置，没有则创建该文件，文件名不能改，如下： // vue.config.js const path = require('...
elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
weixin_39675178的博客
11-25 414
点击右上方红色按钮关注“web秀”，让你真正秀起来前言经常用Element UI的小伙伴，应该知道，Element UI官方文档，可以自由更换主题。那么，我们怎么把这个功能用到自己项目中呢？其实官方文档也有所说明，这里对其进行更详细，更明确的说明，同时提供简单示例，供大家参考。ColorPicker 颜色选择器ColorPicker 颜色选择器，是Element UI 提供的组件，我们可以直接使用...
自定义全局使用颜色
08-22
非常全面的颜色自定义大全，拷贝直接可使用，方便快捷
详解VUE 定义全局变量的几种实现方式
08-30
本篇文章主要介绍了VUE 全局变量的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue2.0设置全局样式(less/sass和css)
08-28
主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue2 颜色全局变量
猫脸码客的博客
03-19 433
/横向布局纵向布局时菜单背景色:export {//菜单背景色变量导出 menu-background : $base-menu-background;
vue3+vite在若依项目中使用scss全局变量、公共颜色
嗨，大家好，我是爱搞知识的咸虾米
12-09 4826
做项目一般都需要设置公共的颜色、字体、文字大小等css变量，如果不设置这些css变量的话，项目中颜色来回复制，等需要改变的时候，每个页面都需要进行替换，使用scss的css变量之后，在每个页面使用变量就能达到统一的目的。
vue3项目引入全局主题色
qq_40912618的博客
12-06 1231
1、创建全局主题色common.less文件 2、引用common.less文件 2、以下两种任选其一即可 1）在vite.config.js中添加以下代码 只看css即可 2）在main.js中添加以下代码 3、现在就可以在全局使用自定义的主题色啦
设置颜色全局变量
最新发布
weixin_46011290的博客
12-10 340
一、style下创建一个存放设置颜色的less文件；二、在main.js里引入。三、在你需要的页面调用。
vue根据配置的色值全局更改主题色
NI_chunz的博客
03-28 389
vue 使用 element ui 动态设置主题色
vue中js与css关联的样式，实例解决全局主题色的问题
shi860715的博客
07-06 676
vue中js与css关联的样式，实例解决全局主题色的问题 文章目录vue中js与css关联的样式，实例解决全局主题色的问题1 场景：2 实例：2.1 效果：2.2 页面2.4 js2.5 css部分2.6 iconfont 使用主题色2.7 结束语 1 场景： 在vue-element-admin框架中，我们要修改统一的主题色 2 实例： 在tagsview中修改统一的主题色，修改默认样式。 2.1 效果： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qC05S
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值