使用vue-cli构建项目,如何引入所有组件公有的less文件?
// index.less
@primary-color: XXX:
@error-color: XXX:
如果在单个组件中的
// component.vue
<style lang="less">
@import './index.less';
</style>
是可以获取到具体变量的..
但是我想在子组件中就没办法取到变量,这个是什么问题?是不是哪里需要配置?
使用vue-cli构建项目,如何引入所有组件公有的less文件?
// index.less
@primary-color: XXX:
@error-color: XXX:
如果在单个组件中的
// component.vue
<style lang="less">
@import './index.less';
</style>
是可以获取到具体变量的..
但是我想在子组件中就没办法取到变量,这个是什么问题?是不是哪里需要配置?
其实用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')
});
你如果是要全局引入就肯定是在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');
这个在哪加啊,试过很多都不管用
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
自答。
给vuejs-templates/webpack提了一条issue询问这个问题。
一名作者表示貌似只能在子组件中重新引入。