less

style标签内使用全局less变量

• 定义变量

// index.less    
@color-default: #30b985

• npm install style-resources-loader vue-cli-plugin-style-resources-loader -D
• 使用style-resource-loader提前加载全局变量的less文件
• 在vue.config.js中添加以下配置

const path = require(‘path‘);

module.exports = {
  // ...
  pluginOptions: {
    ‘style-resources-loader‘: {
      preProcessor: ‘less‘,
      // 引入需要全局加载的 less 文件
      patterns: [path.resolve(__dirname, ‘./src/styles/var.less‘)],
    },
  },

• main.js引用

import ‘./index.less‘

<style lang="less">
    .class{
        color: @color-default;
    }
 </style>