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

在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:

clipboard.png

报错如下:

clipboard.png

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

回答:

估计你的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
  }
})

回答:

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

回答:

clipboard.png
恩,utils中配置了各种样式的加载器

回答:

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

回答:

对于使用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”】
这时候会报错。
image
查了下网上大部分都是有关 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”>就不会有错。
如果能帮到你,给个赞,谢谢!

回答:

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

vue inspect > output.js

暂无评论

发表评论

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