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

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

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

如果在单个组件中的

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

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

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

阅读 18.1k
7 个回答

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

其实用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')
});

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

你如果是要全局引入就肯定是在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是文件路径名,亲测可用

新手上路,请多包涵

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题