当前位置: 代码迷 >> 综合 >> vue-cli2.9.6 中如何使用less
  详细解决方案

vue-cli2.9.6 中如何使用less

热度:93   发布时间:2023-12-29 09:39:09.0

第一步:检查vue-cli的版本号:

vue -V
或
vue --version

如下图:

第二步:下载style-resources-loader

npm i style-resources-loader -D
或
yarn add style-resources-loader -D

第三步:下载less 和 less-loader(less使用3.9.0版本, less-loader使用5.0.0版本)

npm install less less-loader --save-dev
或
yarn add less less-loader -S建议
yarn add less@3.9.0 less-loader@5.0.0 -S

第四步:build下的utils.js文件中generateLoaders下加入以下代码:

if (loader == "less") {loaders.push({loader: "style-resources-loader",options: {patterns: path.resolve(__dirname, "../src/assets/style/*.less")}});}

如图: 

 重启项目应该就ok了!!!

如果重启失败了,请检查package.json中less和less-loader的版本是否正确;

less : 3.9.0

less-loader: 5.0.0