在vite+vue3中使用less

一、首先，安装插件

npm install less
npm install less-loader

二、在 vite.config.js中配置

css: {
    preprocessorOptions: {
      less: {
        math: "always", // 括号内才使用数学计算
        globalVars: {
          // 全局变量
          mainColor: "red",
        },
      },
    },
  },

三、最后在模版里声明css类型

<style lang="less" scoped>
.demo-pagination-block {
  position: fixed;
  bottom: 180px;
  right: 50px;
  .home{
    background-color: pink;
  }
}
</style>