vite项目配置less全局样式的实现步骤
更新时间：2024年02月26日 11:51:44 作者：bug别找我
最近想实现个项目,需要配置全局less,本文主要介绍了vite项目配置less全局样式的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
前言
博主最近学习在vite项目中配置less，通过less去配置项目的全局样式，下面是配置步骤
一、安装依赖
首先项目中安装less和less-loader依赖
npm install less npm install less-loader
二、使用步骤
1.配置vite.config.js
在vite.config.js配置less全局样式，在additionalData里配置全局样式文件路径,文件类型是less,文件位置放在静态文件目录assets下
css: {
// css预处理器
preprocessorOptions: {
less: {
charset: false,
additionalData: '@import "./src/assets/style/global.less";',
},
},
},
2.全局样式编写
在全局样式文件里配置主色调 （其他样式如高宽，间距可自行编写）
@color:#63C4D4;
3.组件使用
在有需要的组件内使用该全局样式
.title{
color:@color;
}
总结
这就在vite项目中配置less全局样式的步骤，更多相关vite配置less全局样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了vue3中使用keep alive实现前进更新后退销毁示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
这篇文章主要介绍了vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了vue清除地址栏路由参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
组件（Component）是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于VUE3学习教程之全局组件和局部组件的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了Vue选项之propsData传递数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在看这篇文章的几点要求：需要你先知道Vuex与Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vuex与Vue-Router的基本使用后再回来看这篇文章2022-11-11
在vsCode中书写Vue页面时无法提示,那真是很郁闷的事情,下面这篇文章主要给大家介绍了关于vsCode中vue文件无法提示html标签的操作方法,需要的朋友可以参考下2023-03-03
本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例；具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
最近工作中有需要将一些前端页面(如报表页面等)导出为pdf的需求,下面这篇文章主要给大家介绍了关于vue3 如何将页面生成 pdf 导出,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于vue-router路由懒加载及实现的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
最新评论