【Vue】Vue3 配置全局 scss 变量

原创

已于 2023-11-25 09:02:18 修改 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端 #css

于 2023-11-21 16:30:03 首次发布

本文介绍了如何在Vite项目中使用全局CSS变量，通过scss预处理器在vite.config.ts中引入variables.scss文件，并在.vue组件中引用这些变量。

variables.scss

$color: #0c8ce9;

vite.config.ts

    // 全局css变量
    css: {
   
   
      preprocessorOptions: {
   
   
        scss: {
   
   
          additionalData: `@import "@/styles/variables.scss";`

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力挣钱的小鑫

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

五、vue3+ts项目框架搭建——全局scss变量定义及使用

xiaoququ的博客

02-18

1772

【代码】五、全局scss变量定义及使用。

【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量

最新发布

1111111111

10-24

372

本文总结了在UniApp中使用SCSS变量遇到的挑战及解决方案。作者最初尝试通过SCSS变量实现全局样式控制，但在动态修改对话框按钮颜色时遇到重复引入问题。经过多次尝试后，最终采用局部引入方式，将变量存储在JS文件中而非SCSS文件，并通过v-bind实现样式绑定。实验表明，这种方法既能满足动态修改需求，又避免了全局引入的复杂性，且维护更方便。最终方案是创建variables.js定义变量，在需要时局部引入，实现了在模板、脚本和样式中统一使用变量的目标。

【SCSS篇】Vite+Vue3项目全局引入scss文件

前端知识分享喵

10-12

5895

Vite+Vue3项目全局引入scss文件

Vue 3.0 scss 全局变量

qq_22741833的博客

04-22

1329

【代码】Vue 3.0 scss 全局变量。

vue3项目下全局使用scss变量

qq_21295455的博客

05-20

877

vue3项目下全局使用scss变量

VUE-CLI配置全局SCSS变量

陈小白

09-20

688

sass-loader版本问题引发的错误：options has an unknown property 'prependData'. These properties are valid。

Vue引入sass并配置全局变量的方法

08-27

主要介绍了Vue引入sass并配置全局变量的方法

vue3设置全局css变量

sinat_34896766的博客

12-12

1553

2、在vite.config.js中导入common.scss文件。1、common.scss文件中定义全局变量。

vue3.0 使用scss全局变量

xiaobai_20190815的博客

10-21

2138

vue3.0 使用scss全局变量

vue3中集成sass实现全局scss样式变量

weixin_59244784的博客

01-05

1979

vue3中集成sass实现全局scss样式变量

Vue3中scss设置的变量全局可用

嫒薇笑的博客

02-13

569

首先，建一个.scss文件，其次在vite.config.ts文件中全局引用。

P2-Vue3后台管理系统-配置scss全局变量

Bruce小鬼

02-05

1338

P2-Vue3后台管理系统-配置scss全局变量 1.概述将项目中重复使用的内容配置成全局变量，当需要改变内容时候只需要改变全局变量，不需要在代码中修改。 2.配置scss全局变量 2.1.新建scss文件夹 scss文件夹管理所有scss文件，全局变量都配置到scss文件中。 2.2.新建第一个全局配置文件在scss文件夹下新建 _variable.scss ⽂件，并配置全局变量。引入样式重置文件样式重置文件内容 html, body, div, span, applet,

【vue】vue-cli3配置scss全局变量

向着光芒的女孩

06-30

1244

由于想在vue文件中使用scss变量，所以想配置一下全局使得更方便使用和维护，package.json中对应的版本号是："@vue/cli-service":"3.5.3"、"sass-loader": "^7.1.0" 1.配置在项目根目录下的vue.config.js中配置 module.exports = { css: { loaderOptions: { // 没有分号会报错 sass: { data: `@import "@/assets/.

VUE3配置sass、less全局变量

m0_50156032的博客

07-09

1019

在style/variable.scss创建一个variable.scss文件,并定义全局变量。

Vue3 组件中使用 SCSS 变量

weixin_64684095的博客

10-01

1906

export {

vue3+vite 使用scss、sass 全局定义的变量以及使用

weixin_44166849的博客

07-18

776

本文介绍在Vue3项目中使用Sass全局变量的方法：1)安装最新版Sass；2)在vite.config.js中配置scss预处理器选项，引入全局变量文件；3)确保变量文件路径正确并定义变量；4)在组件中直接使用全局变量。通过配置additionalData属性实现全局变量的自动注入，无需单独引入即可在任何scss文件中使用。这种方案简化了样式变量的管理，提高了代码复用性和可维护性。

vue-cli3配置scss全局变量

曈欣的博客

11-08

714

想在vue项目中全局使用scss变量，方便使用和维护。首先要保证 scss 文件是可以正常编译的，再进行以下配置。

vue3定义全局 scss变量

09-07

在Vue3项目中定义全局scss变量的方法如下： 1. 首先，安装相关的scss依赖。你需要安装`node-sass`、`sass-loader`和`sass`这三个依赖包。你可以使用以下命令进行安装： ``` npm install node-sass -D npm install ...