vue工具之vite 安装和配置less

1、 安装

// 安装less
npm i less-loader less --save-dev

2、创建文件

src/assets/styles/base.less

var.scss页面

@default-color: #666666;

3、在vite.config.js里配置

⏰ 方式一

import path from 'path';

css: {
  preprocessorOptions: {
    less: {
        javascriptEnabled: true,
        additionalData:  `@import "${path.resolve(__dirname, 'src/assets/styles/base.less')}";`
    }
  } 
},

⏰ 方式二

import path from 'path';

css: {
  preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve('src/assets/styles/base.less')}";`,
        },
        javascriptEnabled: true
      }
  }
}

4、使用

<template>
  <div class="asd">
    <p class="one">231</p>
  </div>
</template>

<script setup>
</script>

<style lang="less" scoped>
.asd {
  background-color: #111;
  .one {
    background: #f00;
    padding: @padding-md;
  }
}
</style>