文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue2问题:如何全局使用Less和Sass变量?

2024-11-30 01:11

关注

1. 需求分析

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

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

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

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

2. 实现步骤

(1)全局使用scss变量

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

配置vue.config.js文件:

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

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)全局使用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. 问题详解

(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 相关配置,例如添加自定义的 loaders、plugins、调整构建输出等。

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

(2)关于Webpack的总结

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

Webpack 的主要功能包括:

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

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

(3)关于less和sass的区别简述

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

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯