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如何实现锚点定位点击滚动高亮
这篇文章主要介绍了vue3如何实现锚点定位点击滚动高亮问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue混入mixin流程与优缺点详解
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
2022-09-09
图文详解Element-UI中自定义修改el-table样式
elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下
2022-08-08
Vue-cli创建项目从单页面到多页面的方法
本篇文章主要介绍了Vue-cli创建项目从单页面到多页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue3+Vite+TS实现二次封装element-plus业务组件sfasga
这篇文章主要介绍了在Vue3+Vite+TS的基础上实现二次封装element-plus业务组件sfasga，下面文章也将围绕实现二次封装element-plus业务组件sfasga的相关介绍展开相关内容，具有一定的参考价值，需要的小伙伴可恶意参考一下
2021-12-12
基于canvas实现手写签名（vue）
这篇文章主要为大家详细介绍了基于canvas实现简易的手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
vue实现从外部修改组件内部的变量的值
这篇文章主要介绍了vue实现从外部修改组件内部的变量的值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
超详细的5个Shell脚本实例分享(值得收藏)
这篇文章主要介绍了超详细的5个Shell脚本实例分享(值得收藏),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
简单的Vue SSR的示例代码
本篇文章主要介绍了简单的 Vue SSR的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
VUE元素的隐藏和显示（v-show指令)
本篇文章主要介绍了VUE元素的隐藏和显示（v-show指令)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06