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

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

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

如果在单个组件中的

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

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

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

回答:

自答。

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

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

回答:

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

回答:

其实用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参数定义就好

回答:

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

回答:

你如果是要全局引入就肯定是在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’);

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注