1:安装依赖
npm install less less-loader --save
2:引入less
2.1：全局引入less
1:当项目中所有的样式都在一个less文件，则可以在app.vue 中引入less
1 2 3 | <style lang="less"> @import "./style/test.less"; </style> |
2:当项目中有多个less文件时，则在main.js 中全局引入全部less
1 2 3 | import "./style/test.less" import "./style/test2.less" import "./style/test3.less" |
2.2局部引入less
局部引入less，那个文件需要引入less 就在那个文件下面加上
1 2 3 | <style lang="less"> @import "./style/test.less"; </style> |
建议使用全局全部引入less,因为引入一遍可以所有文件使用，不必每个文件都引入一遍
3：运行报错解决
注：npm run dev 启动项目时遇到一个错误
1 2 3 4 5 6 7 8 9 10 11 | error in ./src/App.vue Module build failed: TypeError: loaderContext.getResolve is not a function at createWebpackLessPlugin (F:\test-vue-cli\test\node_modules\less-loader\dist\utils.js:31:33) at getLessOptions (F:\test-vue-cli\test\node_modules\less-loader\dist\utils.js:148:31) at Object.lessLoader (F:\test-vue-cli\test\node_modules\less-loader\dist\index.js:27:49) @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-357 13:3-17:5 14:22-365 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8084 webpack/hot/dev-server ./src/main.js |
以上错误为安装的less-loader版本过高，去package.json 中看到less-loader的版本为6.0.0
解决办法：
1：卸载当前安装的less-loader高版本：npm uninstall less-loader
2:卸载完成后安装指定低版本的less-loader：npm install [email protected] --save
我这里安装的是5.0.0的版本
less的版本不用关注，这个错误关键在于less-loader 的版本过高与less版本无关
重新跑一遍项目则可以发现改问题已解决，样式生效