vue 引入外部less_在vue项目中引入less

本文将简单介绍在vue2.x的环境下引入并使用less的流程

1、安装less

在项目的根目录下打开命令行工具，执行命令：

npm install less less-loader --save-dev

安装完成后打开 build目录，修改 webpack.base.conf.js 中的相关配置：

在 module.exports 中找到 module 中的 rules 数组

添加如下代码：

module.exports = {

...

...

module: {

rules: [

{...},

{...},

{

test: /\.less$/,

loader: 'style-loader!css-loader!less-loader'

}

]

}

2、使用less

在.vue文件的 style 标签中添加 lang="less"后，即可采用less的语法编写CSS代码

引入变量(varibles)和混合(mixins)的写法如下：

在 src/assets/目录下新建 styles 目录，并在此目录下编写 varibles.less 和 mixins.less

编写CSS代码时通过 import 引入：

@import '../assets/styles/varibles.less';

@import '../assets/styles/mixins.less';

/* 样式代码 */

3、问题解决

在初次安装less后，在本地使用npm run dev运行项目时出现报错：

TypeError: loaderContext.getResolve is not a function

这很有可能是less-loader版本过高导致的，解决方法如下：

卸载现有less-loader

npm uninstall less-loader

重新安装低版本的less-loader

npm install less-loader@4.1.0 --save