1️⃣ 使用 less

安装如下包

npm install less@4 --save-dev
npm install less-loader@7 --save-dev
npm install less@4 --save-dev
npm install less-loader@7 --save-dev
npm install less@4 less-loader@7 --save-dev

在组件中使用

<style lang="less">
  h1 {
    color: red;
  }
</style>

1️⃣ 配置全局 less

安装如下包

npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader

配置 vue.config.js

// vue.config.js
const path = require("path");
module.exports = {
  // 安装 style-resources-loader 与 vue-cli-plugin-style-resources-loader
  // 命令: npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      // 这三种 patterns 写法都是可以的
      // patterns: ["./src/styles/global.less", "./src/styles/variables.less"]
      // patterns: "./src/styles/variables.less"
      patterns: [
        // 两种路径写法都可以，这里的路径不能使用 @ 符号，否则会报错
        // path.resolve(__dirname, 'src/styles/variables.less')
        path.resolve(__dirname, "src/styles/variables.less"),
        path.resolve(__dirname, "src/styles/mixins.less"),
        path.resolve(__dirname, "src/styles/global.less"),
      ],
    },
  },
};

组件中使用

<template>
  <div id="app">
    <h1 class="variables">variables</h1>
    <h1 class="mixins">mixins</h1>
    <h1 class="global">global</h1>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less">
  .variables {
    color: @color;
  }
  .mixins {
    .color();
  }
</style>