uniapp vue-cli 创建引入sass 的坑

入坑步骤

• 按照官方文档使用vue-cli 创建uniapp

vue create -p dcloudio/uni-preset-vue my-project

• 使用sass，标签

<style lang="scss">
	
</style>

• 编译报错信息

Failed to compile.\
\
./src/pages/index/index.vue Module not found: Error: Can't resolve 'sass-loader' in '*/Desktop/my-project'

ERROR  Failed to compile with 1 error                               下午5:51:06

\

Failed to resolve loader: sass-loader

You may need to install it.

• 安装 sass-loader， 运行：npm i sass-loader ，报错如下：

npm ERR! code ERESOLVE

npm ERR! ERESOLVE unable to resolve dependency tree

npm ERR! 

npm ERR! Found: **webpack**@**4.46.0**

npm ERR! node_modules/webpack

npm ERR!   peer **webpack**@" **>=2**" from **babel-loader**@**8.2.2**

npm ERR!   node_modules/babel-loader

npm ERR!     **babel-loader**@" **^8.0.5**" from **@hap-toolkit/packager**@**0.6.13**

npm ERR!     node_modules/@dcloudio/uni-quickapp-native/node_modules/@hap-toolkit/packager

npm ERR!       **@hap-toolkit/packager**@"**0.6.13**" from **@dcloudio/uni-quickapp-native**@**2.0.0-31920210709003**

npm ERR!       node_modules/@dcloudio/uni-quickapp-native

npm ERR!         **@dcloudio/uni-quickapp-native**@" **^2.0.0-31920210709003**" from the root project

npm ERR!     **babel-loader**@" **^8.0.5**" from **@hap-toolkit/packager**@**0.6.15**

npm ERR!     node_modules/@hap-toolkit/packager

npm ERR!       **@hap-toolkit/packager**@" **^0.6.13**" from **@hap-toolkit/dsl-vue**@**0.6.13**

npm ERR!       node_modules/@hap-toolkit/dsl-vue

npm ERR!         **@hap-toolkit/dsl-vue**@"**0.6.13**" from **@dcloudio/uni-quickapp-native**@**2.0.0-31920210709003**

npm ERR!         node_modules/@dcloudio/uni-quickapp-native

npm ERR!       1 more (@hap-toolkit/server)

npm ERR!     1 more (@vue/cli-plugin-babel)

npm ERR!   peer **webpack**@" **^4.0.0**" from **cache-loader**@**4.1.0**

npm ERR!   node_modules/cache-loader

npm ERR!     **cache-loader**@" **^4.1.0**" from **@vue/cli-service**@**4.5.13**

npm ERR!     node_modules/@vue/cli-service

npm ERR!       peer **@vue/cli-service**@" **^3.0.0 || ^4.0.0-0**" from **@vue/cli-plugin-router**@**4.5.13**

npm ERR!       node_modules/@vue/cli-plugin-router

npm ERR!         **@vue/cli-plugin-router**@" **^4.5.13**" from **@vue/cli-service**@**4.5.13**

npm ERR!       3 more (@vue/cli-plugin-babel, @vue/cli-plugin-vuex, the root project)

npm ERR!     **cache-loader**@" **^4.1.0**" from **@vue/cli-plugin-babel**@**4.5.13**

npm ERR!     node_modules/@vue/cli-plugin-babel

npm ERR!       dev **@vue/cli-plugin-babel**@" **~4.5.0**" from the root project

npm ERR!   22 more (copy-webpack-plugin, css-loader, file-loader, ...)

npm ERR! 

npm ERR! Could not resolve dependency:

npm ERR! **sass-loader**@" ***** " from the root project

npm ERR! 

npm ERR! Conflicting peer dependency: **webpack**@**5.48.0**

npm ERR! node_modules/webpack

npm ERR!   peer **webpack**@" **^5.0.0**" from **sass-loader**@**12.1.0**

npm ERR!   node_modules/sass-loader

npm ERR!     **sass-loader**@" ***** " from the root project

npm ERR! 

npm ERR! Fix the upstream dependency conflict, or retry

npm ERR! this command with --force, or --legacy-peer-deps

npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

npm ERR! 

• 原因分析：npm7对peerDependencies要求很好为严格，npm6允许通过的部分不再允许通过。

网传解决方案1：npm install --legacy-peer-deps 大概意思是对其进行忽略
网传解决方案2:是将npm降级到npm@6

然并没有成功运行，换一种思路，指定sass- loader版本，再进行安装即可成功，于是在www.npmjs.com/ 搜索 sass- loader

最新版本是 12.1.0，我们指定一个使用较多的老版本，如下图：

直接在项目package.json中指定版本号： "sass-loader": "^10.2.0",如图：

再次：npm install 完美解决