Vue Cli 项目全局使用 less 变量 – 珊瑚贝

安装插件

yarn add less less-loader style-resources-loader vue-cli-plugin-style-resources-loader -D

新增 less 变量文件

// file variable.less
@color: #fff;

调整 vue.config.js 文件

const path = require("path")
module.exports = {
pluginOptions: {
  "style-resource-loader":{
   preProcessor: "less",
   patterns: [path.resolve(__dirname, "./src/assets/less/variable.less")]
  }
}
}

在代码中使用

<template>
<div class="test"></div>
</template>
<script></script>
<style lang="less" scoped>
.test {
background: @color;
}
</style>