Vue2问题:如何全局使用less和sass变量?

前端功能问题系列文章,点击上方合集↑

序言

大家好,我是大澈!

本文约2400+字,整篇阅读大约需要4分钟。

本文主要内容分三部分,如果您只需要解决问题,请阅读第一、二部分即可。如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分。

感谢关注微信公众号:“程序员大澈”,然后加入问答群,从此让解决问题的你不再孤单!

1. 需求分析

为了提高样式的复用性和可维护性,我们会选择将经常使用的常量、颜色、字体等信息,封装到公共变量文件中,然后全局引入,进而在任何组件中不需要再单独引用,直接使用变量即可。

通过定义全局变量,可以减少代码中的重复。如果需要修改某个常量或样式,只需要修改全局变量的值,而不需要逐个修改每个使用该值的地方。

那么就有了今天的问题,当我们使用lesssass预处理器定义样式变量时,该如何在全局中使用其变量呢?

朋友们不妨先停下来思考一下,再往下看实现步骤。当然,我们这里聊的是,VueCLI3+脚手架创建的项目。

2. 实现步骤

2.1 全局使用scss变量

新建公共scss变量文件,在其中定义所需要的全局变量,用$定义。

配置vue.config.js文件:

让我们逐步解释一下这个配置选项,

  • additionalData 是一个特定于预处理器的配置选项,用于向预处理器传递额外的数据。

  • 数据值这里使用sass的 @import 指令来引入全局变量文件。

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({// 全局配置使用scss变量css: {loaderOptions: {// 单独配置scss或sass,配置scss语句结尾必须要有分号,配置sass语句结尾必须没有分号scss: {additionalData: `@import "@/assets/css/sassGlobalVars.scss";`},// sass: {//   additionalData: `@import "@/assets/css/sassGlobalVars.sass";`// },},},
})

2.2 全局使用less变量

新建公共less变量文件,在其中定义所需要的全局变量,用@定义。

安装Webpack插件style-resources-loader

安装时,我们要选择less预处理器对应的版本。

vue add style-resources-loader

配置vue.config.js文件:

这里我们使用的是,Node.js中的路径解析表达式,用于获取指定全局样式文件的绝对路径。但要注意的是,此处不能使用别名路径,会报错。

const { defineConfig } = require('@vue/cli-service')
const path = require('node:path')module.exports = defineConfig({// 全局配置使用less变量pluginOptions: {'style-resources-loader': {preProcessor: 'less',patterns: [// 这个是加上自己的路径,注意此处不能使用别名路径path.resolve(__dirname, "./src/assets/css/lessGlobalVars.less")]}}
})

3. 问题详解

3.1 关于VueCLI的总结

Vue CLI 是一个基于 webpack 的官方脚手架工具,用于快速搭建 Vue.js 项目。它提供了一套预定义的项目结构、开发服务器、构建配置和插件系统,使得创建和管理 Vue.js 项目变得更加简单和高效。

目前,最新的Vue CLI版本已经到了5,并且官方已不再推荐使用。

Vue CLI 通过封装和预配置 webpack,简化了使用 webpack 进行 Vue.js 项目开发的流程。它隐藏了复杂的 webpack 配置细节,提供了一组约定和默认配置,使得开发者能够专注于编写 Vue 组件和业务逻辑,而无需手动配置和管理 webpack。

Vue CLI 集成了 webpack,并提供了一系列的插件和配置选项,可以根据项目需求进行自定义配置。你可以通过 Vue CLI 的配置文件(vue.config.js)来修改 webpack 相关配置,例如添加自定义的 loadersplugins、调整构建输出等。

总结来说,Vue CLI 是基于 webpack 的构建工具,它简化了 Vue.js 项目的搭建和开发流程,并提供了对 webpack 配置的扩展和定制能力,使开发者能够更加专注于 Vue.js 应用的开发。

3.2 关于Webpack的总结

Webpack 是一个现代化的静态模块打包工具。它主要用于将前端项目中的各种资源(如 JavaScriptCSS、图片等)视为模块,并根据模块之间的依赖关系进行静态分析,最终将它们打包成适用于浏览器环境的静态资源。

Webpack 的主要功能包括:

  • 模块打包: Webpack 可以将项目中的各种资源文件(如 JavaScriptCSS、图片等)都视为模块,并通过依赖关系对它们进行静态分析和打包。

  • 依赖管理: Webpack 可以通过模块之间的依赖关系,自动解析和加载模块所依赖的其他模块,包括通过 import、require 等语法引入的模块。

  • 代码转换: Webpack 支持使用各种加载器(Loader)来对模块的源代码进行转换。例如,可以使用 Babel Loader 将 ES6+ 代码转换为兼容性更好的 ES5 代码,或使用 CSS Loader 处理 CSS 文件并提取样式。

  • 代码分割: Webpack 支持将项目中的代码分割成多个块(chunk),并通过按需加载的方式实现优化。这可以减少初始加载时间,提高应用的性能。

  • 插件系统: Webpack 提供了丰富的插件系统,可以通过插件来扩展和定制打包过程。插件可以用于优化代码、生成 HTML 文件、处理静态资源等各种用途。

开发服务器: Webpack 提供了一个开发服务器,可以在开发过程中实时监测代码变化,并自动重新构建和刷新页面,提高开发效率。

Webpack 的配置文件是一个JavaScript模块,通常命名为 webpack.config.js。在配置文件中,你可以定义入口文件、输出目录、加载器、插件等各种配置项,以满足项目的需求。

总结来说,Webpack 是一个强大的静态模块打包工具,通过模块化和依赖管理,能够将前端项目中的各种资源打包成优化的静态文件,同时提供了丰富的扩展和定制能力,适用于构建现代化的 Web 应用程序。

3.3 关于less和sass的区别简述

Less 和 Sass 都是流行的 CSS 预处理器,它们在功能和语法上有一些区别。下面是它们之间的一些主要区别:

  • 语法: Less 使用类似CSS 的语法,而 Sass 使用类似于 Ruby 的语法。Less 的语法更接近于原生 CSS,因此对于熟悉 CSS 的开发人员来说,上手较为容易。Sass 的语法更为灵活和强大,具有更多的编程特性,如变量名可以以 $ 开头,支持嵌套规则等。

  • 编译方式: Less 使用 JavaScript 运行时进行编译,而 Sass 使用 Ruby 运行时进行编译。这意味着在使用 Less 时,只需在前端项目中引入 Less.js 即可进行实时编译;而使用 Sass 时,需要先安装 Ruby 环境,并通过命令行工具或构建工具进行编译。

  • 生态系统: Sass 有一个更为庞大和活跃的生态系统,拥有丰富的第三方库和工具支持。它的社区更大,有更多的资源和文档可供参考。Less 的生态系统也相对健全,但相对于 Sass 来说规模较小。

  • 功能特性: Sass 在功能特性方面更为强大。它支持混合宏(Mixin)、嵌套规则、条件语句等高级功能,使得样式表的编写更加灵活和可维护。Less 的功能相对较为简单,但仍提供了基本的变量、嵌套规则等功能。

结语

建立这个平台的初衷:

  • 打造一个仅包含前端问题的问答平台,让大家高效搜索处理同样问题。

  • 通过不断积累问题,一起练习逻辑思维,并顺便学习相关的知识点。

  • 遇到难题,遇到有共鸣的问题,一起讨论,一起沉淀,一起成长。

感谢关注微信公众号:“程序员大澈”,然后加入问答群,从此让解决问题的你不再孤单!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/179684.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大一学编程怎么学?刚接触编程怎么学习,有没有中文编程开发语言工具?

大一学编程怎么学?刚接触编程怎么学习,有没有中文编程开发语言工具? 1、大一刚开始学编程,面对复杂的代码学习非常吃力,很难入门。建议刚接触编程可以先学习中文编程,了解其中的编程逻辑,学编程…

Flink流批一体计算(22):Flink SQL之单流kafka写入mysql

1. 准备工作 什么是Kafka源表 Kafka是分布式、高吞吐、可扩展的消息队列服务,广泛用于日志收集、监控数据聚合、流式数据处理、在线和离线分析等大数据领域。 docker部署zookeeper docker pull wurstmeister/zookeeperdocker run -d --restartalways \ --log-dr…

LeetCode [中等]3. 无重复字符的最长子串

3. 无重复字符的最长子串 - 力扣(LeetCode) 给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。 1. 滑动窗口(Sliding Window): 滑动窗口是一种用于处理数组或列表的子数组或子序列的问题…

Vue实现纯前端导入excel数据

准备工作 - 下载 xlsx npm install xlsx下面直接上代码&#x1f447; <template><div><input type"file" accept".xlsx, .xls" change"handleClick"></div> </template><script langts setup> import * a…

Vue基础入门(四):Vue3快速开发模板

快速开发Vue的解决方案 ​ Vue 的开发需要的 node 环境&#xff0c;其实上在开发的过程中会遇到一些你想不到的问题&#xff0c;比如 npm工具的版本和 node 环境不匹配&#xff08;你把其他项目导入到自己的环境&#xff09; ​ vue-element-admin&#xff08;是一个官方提供…

git仓库如何撤销提交,恢复提交,重置版本命令

撤销提交&#xff1a; 要撤销最近一次提交&#xff08;未推送到远程仓库&#xff09;&#xff0c;可以使用以下命令&#xff1a; git reset HEAD^该命令将会把最后一次提交的修改从当前主分支中移除&#xff0c;并将这些修改的状态保留在本地工作目录中。 如果想要取消所有的…

HuggingFace学习笔记--利用API实现简单的NLP任务

目录 1--中文分类 1-1--使用预训练模型推理 1-2--基于预训练模型实现下游任务 2--中文填空 3--中文句子关系推断 1--中文分类 1-1--使用预训练模型推理 代码实例&#xff1a; import torch from datasets import load_dataset from transformers import BertTokenizer,…

leetCode 216.组合总和 III + 回溯算法 + 剪枝 + 图解 + 笔记

找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺序返回 示例 1: 输入: k 3, n 7 输出: [[1,2,4]] 解释…

kotlin中sealed语句的使用

sealed 密封类是 Kotlin 中的一种特殊类别&#xff0c;它的主要作用是限制类的继承结构。密封类用于表示受限的类继承结构&#xff0c;即一个值只能有有限几种类型&#xff0c;而不能有任意类型。密封类通常用于表示一种有限集合的类型。 下面是密封类的主要特性和作用&#x…

pinia从入门到使用

pinia: 比vuex更适合vue3的状态管理工具&#xff0c;只保留了vuex 原有的 state, getters&#xff0c;actions 作用等同于 data computed methods&#xff0c;可以有多个 state 1.安装创建导入 安装&#xff1a;npm install pinia 或 yarn add pinia 创建stores/index.js inde…

Springboot2+WebSocket

一、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 二、添加配置 新增配置文件 config/WebSocketConfig.java import org.springframewo…

Jmeter接口测试和性能测试

目前最新版本发展到5.0版本&#xff0c;需要Java7以上版本环境&#xff0c;下载解压目录后&#xff0c;进入\apache-jmeter-5.0\bin\&#xff0c;双击ApacheJMeter.jar文件启动JMemter。 1、创建测试任务 添加线程组&#xff0c;右击测试计划&#xff0c;在快捷菜单单击添加-…

插入或更新学生信息的 SQL 语句

#! https://zhuanlan.zhihu.com/p/667794849 插入或更新学生信息的 SQL 语句 INSERT INTO student_info_table (id, name, age, gender, major, grade, attendance_state, last_attendance_time ) VALUES (?, ?, ?, ?, ?, ?, ?, ?) ON DUPLICATE KEY UPDATEname VALU…

【Python百宝箱】探索Python科学绘图宝库:交互与美学并存

前言 Python作为一种强大的编程语言&#xff0c;在数据科学领域展现出了巨大的优势。数据可视化作为数据科学的重要组成部分&#xff0c;为数据分析和解释提供了有力的工具。本文将深入探讨多个Python库&#xff0c;这些库不仅提供了丰富的绘图功能&#xff0c;而且能够满足不…

VSCode Vue 开发环境配置

Vue是前端开发中的重要工具与框架&#xff0c;可以保住开发者高效构建用户界面。 Vue2官方文档&#xff1a;https://v2.cn.vuejs.org/ Vue3官方文档&#xff1a;https://cn.vuejs.org/ Vue的安装和引用 Vue2的官方安装指南&#xff1a;https://v2.cn.vuejs.org/v2/guide/ins…

ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO

ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO 概述 上节 ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO 讲述了如何通过网页控制一个 GPIO。本节实现在网页上控制多个 GPIO。 示例解析 前端设计 前端代码建立了四个 GPIO&#xff0c;如下死 GPIO 2 在前端的…

配置 Mantis 在 Windows 上的步骤

配置 Mantis Bug Tracker 在 Windows 上的步骤 Mantis Bug Tracker 是一款开源的缺陷跟踪系统&#xff0c;用于管理软件开发中的问题和缺陷。在 Windows 环境下配置 Mantis 可以帮助开发者更方便地进行项目管理。以下是一个详细的教程&#xff0c;包含了 EasyPHP Devserver 和…

python中字符串操作函数split的用法

在Python中&#xff0c;字符串操作最常用的split()函数&#xff0c;用于将字符串分割成子字符串&#xff0c;并返回一个包含这些子字符串的列表。split()函数通过指定分隔符将字符串拆分成多个部分。 split()函数的语法&#xff1a; str.split(separator, maxsplit)separator…

路径规划之A*算法

系列文章目录 路径规划之Dijkstra算法 路径规划之Best-First Search算法 路径规划之A*算法 路径规划之A*算法 系列文章目录前言一、前期准备1.1 算法对比1.2 数学式方法1.3 启发式方法 二、A*算法2.1 起源2.2 思想2.3 启发式函数2.4 过程2.5 案例查看 前言 之前提过Dijkstra算…

leetcode 1670

leetcode 1670 解题思路 使用2个deque作为类的成员变量 code class FrontMiddleBackQueue { public:deque<int> left;deque<int> right;FrontMiddleBackQueue() {}void pushFront(int val) {left.push_front(val);if(left.size() right.size()2){right.push_fr…