vue配置全局less变量/方法 详细过程

核心：sass-resources-loader组件

实现过程如下：

1.安装

npm i sass-resources-loader -S

 

2.修改配置文件build/utils.js

2.1 在cssLoaders中添加如下代码：

// 全局less变量配置
function lessResourceLoader() {
  var loaders = [
      cssLoader,
      'less-loader',
      {
          loader: 'sass-resources-loader',
          options: {
              resources: [
                  // 此处地址指向配置less变量的文件
                  path.resolve(__dirname, '../src/assets/public.less'),
              ]
          }
      }
  ];
  if (options.extract) {
      return ExtractTextPlugin.extract({
          use: loaders,
          fallback: 'vue-style-loader'
      })
  } else {
      return ['vue-style-loader'].concat(loaders)
  }
}

2.2 配置后如下图所示：

2.3 修改cssLoaders返回值，将less的值替换为刚刚添加的less配置方法lessResourceLoader；

 

3.创建less变量（方法）配置文件

在2.2配置指向的文件中添加less变量/方法（我设置了src/assets/public.less为less全局文件，实现可依据个人开发情况调整）；

 

4.使用

案例代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped lang='less'>
h1 {
  color: @color1;
}
</style>

案例效果

 

ps:以上为个人开发过程中总结，不足之处，欢迎留言指正交流~