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

• Z时代
• 2024-01-10
• 分类：技术分享

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

回答

估计你的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引入。

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

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

以上是 【Vue】vue-cli如何引入全局less文件？ 的全部内容， 来源链接： utcz.com/a/76614.html