vue安装使用less，解决与webpack的冲突

第077个

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

在vue的项目页中使用less，发现没有安装less，提示错误信息。如何来安装使用less呢？

安装

1，查看vue-cli的版本。

vue --version

本demo电脑使用的是 @vue/cli 4.5.13 ，为什么要查看vue-cli版本，跟后面安装的less-loader 版本是有关系的。

2，安装less 和less-loader

npm install --save-dev less less-loader

安装完后，发现安装的版本为

“less”: “^4.2.0”,
“less-loader”: “^12.2.0”,

出现冲突错误

我的一个页面中是类似于这样的代码：

<template>
  <div class="my-component">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style lang="less">
.my-component {
  color: @primary-color;
}
</style>

运行项目报错了：

解决冲突的办法

方案1：

之前网上看到过这样的一个说法：使用 Vue CLI 创建一个新的 Vue 项目，由于webpack提前做了一些工作，可以不用在vue.config.js中配置less模块。 但是这个错误需要解决的。

通过我的版本 @vue/cli 4.5.13 得知 less-loader 可以上适配7.2.0版本。 所以我做了降级，试了试，还真解决了问题，不用在在vue.config.js中配置less模块了。

方案2：

配置vue.config.js的内容

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 在这里定义全局变量
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

经过一番测试，发现不好使。可能是没有仔细操作而导致缺了点什么东东。 就暂用方案1来解决这个问题吧，有时间再仔细研究一下这种方案。

现在你已经成功地在 Vue 项目中安装了 Less，并解决了与 Webpack 的冲突。你可以在项目中使用 Less 编写样式了。