vue-cli如何引入全局less文件？

Question

使用vue-cli构建项目，如何引入所有组件公有的less文件？

// index.less
@primary-color: XXX:
@error-color: XXX:

如果在单个组件中的

// component.vue
<style lang="less">
@import './index.less';
</style>

是可以获取到具体变量的..

但是我想在子组件中就没办法取到变量，这个是什么问题？是不是哪里需要配置？

Answer 1

自答。

给vuejs-templates/webpack提了一条issue询问这个问题。

一名作者表示貌似只能在子组件中重新引入。

Answer 2

楼上说的对，只能在引入一遍。

Answer 3

其实用Yeoman的generator-fountain-webapp做个vue工程就能看到，它的做法是：

import Vue from 'vue';
import Hello from './app/Hello.vue';

import './index.less';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      components: {
        default: Hello
      }
    }
  ]
});

export default new Vue({
  el: '#root',
  router,
  render: h => h('router-view')
});

Answer 4

之前我也在看这个帖子寻找方案，然后，我自己写了个脚手架，解决了：
https://github.com/heyui/hey-cli
使用globalVars参数定义就好

Answer 5

可以引用reference。我是这样解决的。
可参考：less文档引用说明 ，或issues。

Answer 6

你如果是要全局引入就肯定是在main .js 引入
如果是引入less就肯定不能跟以前一样引入css一样
首先你保证你的vue组件可以运行less,不懂就去博客看看,很多资料
之后就是引入了,首先打开控制台 npm install style-loader --save,之后你如果在main.js引入就要在main.js写
-->require('!style-loader!css-loader!less-loader!./assets/css/init.less');
-->./assets/css/init.less是文件路径名,亲测可用

Answer 7

-->require('!style-loader!css-loader!less-loader!./assets/css/init.less');

这个在哪加啊，试过很多都不管用