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

Question

在vue项目中，我在main.js文件中直接import一个less文件，结果webpack编译不成功。

这是webpack配置：

     {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }

main.js：

报错如下：

小弟vue.js和webpack初学乍道，网上只搜到了一个类似的问题，但是没有解答http://stackoverflow.com/ques...

Answer 1

估计你的vue-cli改动过了。提示你的less文件里有错误。
一个例子：

//main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import './assets/css/bootstrap.min.css'
import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(VueResource)
Vue.use(ElementUI)
/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

Answer 2

我把less-loader在webpack中的配置去掉了就好了。。应该是在build/utils.js中已经定义好了各种css的loader引入。

Answer 3

恩，utils中配置了各种样式的加载器

Answer 4

在npm less以后，直接在main.js中引用就好，vue-cli中不需要自己配置，已经配置好了。

Answer 5

对于使用less这个问题，我特地做了一个笔记。
安装less的步骤：
（1）使用npm安装less和less-loader： npm install less less-loader --save
（2）(2)在【build】文件下的【webpack.base.conf.js】文件中【rules】中加入
{

    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",

}
（3）在<style>标签里面写上【lang="less"】
这时候会报错。

查了下网上大部分都是有关 sass 的问题，看了下。发现原因是由于less-loader安装的版本过高，在【package.json】中，可查看到安装的版本。
解决方法：*
卸载安装的高版本的less-loader，【npm uninstall less-loader】，
安装指定低版本的less-loader【npm install less-loader@4.1.0 --save】。
这时候无论是在main.js中引入less文件，还是在vue页面使用<style lang="less">就不会有错。
如果能帮到你，给个赞，谢谢！

Answer 6

可以直接输出webpack配置到指定文件，vue-cli里已经支持了less

vue inspect > output.js