vue3+vite配置less和sass样式预处理器

1.安装less

npm i less less-loader -s

2.安装sass

npm i sass node-sass sass-loader -s

3.配置全局样式变量

export default defineConfig({
  plugins: [ ],
  resolve: {},
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/css/globalStyle.scss";`
      },
      less: {
        modifyVars: {
          hack: `true; @import "./src/assets/css/styleVariable.less";`,
        },
        javascriptEnabled: true,
      }
    }
  },
  server: {}
})

4.全局样式文件

//----------------styleVariable.less---------------------
@blue: #00f;

//----------------globalStyle.scss---------------------
$red: #f00;

5.使用

<style lang="less" scoped>
.test{
  color: @blue;
}
</style>

<style lang="scss" scoped>
.test{
  color: $red;
}
</style>