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

已于 2022-02-28 13:57:07 修改
阅读量1.5k 收藏
点赞数
分类专栏： VUE 文章标签： vue.js 前端 javascript
于 2022-02-28 13:55:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_x_m/article/details/123180647
版权

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. 如果以上问题都没有,但还是会报错.要重启项目

越简单的事情就越要仔细

月下脆竹書閣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue定义全局颜色变量
moon_tang的博客
07-28 7951
1、新建一个style文件夹，然后里面再新建一个baseColor.scss文件，里面定义全局颜色变量 2、在 build 文件夹中找到utils.js文件，将它的**scss: generateLoaders(‘sass’)**修改为 scss: generateLoaders('sass').concat( { loader: 'sass-resources-...
浅谈vue-cli 3.0.x 初体验
08-27
在多环境配置方面，Vue CLI 3.0.x 支持 `.env` 文件系统，允许你为不同环境（如开发、测试和生产）设置不同的变量。默认情况下，`.env.development`、`.env.production` 和 `.env.test` 分别对应开发、生产和测试...
vue 设置全局变量的颜色
strong90的博客
09-02 8151
版本 vue cli 2.6.0 方式1： 在工程根目录下，创建vue.config.js 内容如下： module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { // 所以这里假设你有 `src/variables.scss` 这个文件 ...
vue 项目配置全局主题色
最新发布
qq_41821445的博客
05-24 248
创建 vue 组件，将定义 css 变量的步骤放在一个单独的组件中，在 app.vue 页面去引用，进而应用全局。hexToRgb方法是将 hex 色值转为 rgb 类型，rgb 类型可调透明度。其中isHexColor方法是用来判断当前色值是否是#开头的 hex色值，2.在 app.vue 中引用组件并传入色值变量。这是最近刚学到的一种便捷操作，简直不要太方便。3.然后你在页面中就可以直接使用。利用 css 变量实现。
elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
weixin_39675178的博客
11-25 317
点击右上方红色按钮关注“web秀”，让你真正秀起来前言经常用Element UI的小伙伴，应该知道，Element UI官方文档，可以自由更换主题。那么，我们怎么把这个功能用到自己项目中呢？其实官方文档也有所说明，这里对其进行更详细，更明确的说明，同时提供简单示例，供大家参考。ColorPicker 颜色选择器ColorPicker 颜色选择器，是Element UI 提供的组件，我们可以直接使用...
vue3+vite在若依项目中使用scss全局变量、公共颜色
qq_18798149的博客
12-09 3975
做项目一般都需要设置公共的颜色、字体、文字大小等css变量，如果不设置这些css变量的话，项目中颜色来回复制，等需要改变的时候，每个页面都需要进行替换，使用scss的css变量之后，在每个页面使用变量就能达到统一的目的。
vue-cli配置全局sass、less变量的方法
10-16
对于 Sass，Vue CLI 提供了一种直接在 `vue.config.js` 中配置全局变量的方法。在 `vue.config.js` 中添加如下代码： ```javascript module.exports = { ... css: { loaderOptions: { sass: { // '@' 是 ...
vue项目使用.env文件配置全局环境变量的方法
10-16
process.env对象包含了Node.js的全局变量，它是一个在所有Node.js代码中都可以访问的变量，因此，设置在.env文件中的环境变量也可以在Vue项目中的任何部分使用。 举个例子，假设我们有以下.env.development文件内容...
vue如何引入sass全局变量
12-12
sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，...
vue3项目引入全局主题色
qq_40912618的博客
12-06 821
1、创建全局主题色common.less文件 2、引用common.less文件 2、以下两种任选其一即可 1）在vite.config.js中添加以下代码 只看css即可 2）在main.js中添加以下代码 3、现在就可以在全局使用自定义的主题色啦
自定义全局使用颜色
08-22
非常全面的颜色自定义大全，拷贝直接可使用，方便快捷
详解VUE 定义全局变量的几种实现方式
08-30
本篇文章主要介绍了VUE 全局变量的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue2.0设置全局样式(less/sass和css)
08-28
主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中js与css关联的样式，实例解决全局主题色的问题
shi860715的博客
07-06 584
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
vue项目scss定义全局变量--颜色变量
热门推荐
qq_41227106的博客
02-14 1万+
1、建立一个vue项目，并且该项目使用scss语法 2、定义一个scss文件，里面定义一个全局的变量 3、在build下的utils.js中配置scss: generateLoaders('sass')，把css: generateLoaders('sass'),修改为 scss: generateLoaders('sass') .concat( { loader: 'sass...
在vue的style中使用变量
tumi
12-02 1万+
<span:style="{'color': color}"></span> 此处的color可以是你穿进去的变量，也可以是后台返回的数据 或者 var color = newvalue; data() { return { changeStyle:'background:'+color } } html中直接这样就可以...
vue3.0版本 使用less 定义全局颜色/样式变量
weixin_44168929的博客
04-25 1675
时，遇到样式不能全局定义的问题，本文中没有使用vite 创建项目和没有使用ts，是配置在vue.config.js中，定义全局less样式。二、再安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader。三、然后在vue.config.js 配置中加入代码。一、先安装less 和 less-loader。近期在写vue3的项目使用。修改配置，记得重新启动项目哟~
vue+less+style-resources-loader 配置全局颜色变量
VVVVV
11-29 928
全局统一样式后，可配置vue.config.js实现全局颜色变量，方便在编写时使用统一风格的色彩。
vue引入全局静态变量_Vue-cli3配置全局环境变量
05-19
在 Vue CLI 3 中，可以通过在根目录下的 `.env` 文件中定义全局环境变量，然后在 Vue 项目的任何地方使用这些变量。 以下是引入全局静态变量的步骤： 1. 在项目根目录下创建一个 `.env` 文件。 2. 在 `.env` 文件中定义全局变量，例如 `VUE_APP_NAME=My App`。 3. 在 Vue 组件中使用 `process.env.VUE_APP_NAME` 来引用定义的全局变量。 需要注意的是，变量名必须以 `VUE_APP_` 开头，这是为了避免与其他系统变量冲突。 另外，还可以创建不同的环境文件，如 `.env.development`、`.env.production` 等，在不同的环境中使用不同的变量值。在启动开发服务器时，可以通过 `--mode` 参数来指定使用哪个环境文件，例如 `vue-cli-service serve --mode development`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值