Vue3+Vite中使用Less

一、安装less

在创建好Vue项目后，在项目路径中打开命令行输入以下命令：

css 复制代码

npm i less less-loader --save-dev

二、使用less

安装完成后便可以在项目中使用less，需要在style标签中设置lang属性为less如：

less 复制代码

<style scoped lang="less">
  @fontSize: 16px;
  @color: #000;
  .login-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    font-size:@fontSize;
    color:@color;
  }
</style>

三、配置less全局共享变量

1.配置全局 less中我们可以自定义变量，一些变量往往是全局共享的，为了方便我们可以在vite.config.js中defineConfig里面添加配置如下：

(需要自己新建一个存放共享的变量的文件如：mixin.less)

css 复制代码

   css: {
    // css预处理器
    preprocessorOptions: {
        less: {
                    additionalData: '@import "@/assets/style/mixin.less";',
            }
    }
  }

完整代码(vite.config.ts配置)：

csharp 复制代码

// https://vite.dev/config/
export default defineConfig(({command,mode}:ConfigEnv) :UserConfig =>{
    return {
        plugins: createVitePlugins(env,isBuild), // 配置插件,
        base: './', // 设置打包路径
        resolve: {
            alias: {
                '@': path.resolve(__dirname,'./src'),// 设置 `@` 指向 `src` 目录
                "@assets":path.resolve(__dirname,"./src/assets"),
                "@components":path.resolve(__dirname,"./src/components"),
            },

        //安装对应的less npm i less less-loader -D
         css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/style/variables.scss" as *;',
                },
                // 配置全局共享变量less
                less: {
                    additionalData: '@import "@/assets/style/mixin.less";',
                }
            }
        },
}
})

mixin.less文件：

less 复制代码

@color: red;
@fontSize:28px;

// 定义一个混合器
// @button-style:{
//     border: none;
//     padding: 10px 20px;
//     // color: white;
//   }
.button-style(){
    border: none;
    padding: 10px 20px;
    // color: white;
  }
.text_ellipsis_some(@count:1){//多行隐藏带省略号
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @count;
    -webkit-box-orient: vertical;
}
.backgroundImg(@imgUrl,@left:0,@right:0){
    background: url(@imgUrl) no-repeat @left @right;
    background-size: 100% 100%;
}
.font_params(@sizes,@fam,@wei){
    font-size: @sizes;
    font-family: @fam;
    font-weight: @wei;
}

.border_params2(){
   border: 1px solid red;
}

组件中直接使用全局配置的变量：

less 复制代码

<style scoped lang="less">
  .login-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    font-size:@fontSize;
    color:@color;
    .border_params2();
    .button-style();
  }
</style>

less单独在组件中使用：

less 复制代码

<style scoped lang="less">
 @import '@/assets/style/var.less'; // 引入less文件
h1{
  color: royalblue;
  font-weight: @fontWeight;
}
</style>