vue2 sass 安装及使用

最近在看前端。其一因为手里有个项目uniapp的里面使用了sass，但是有sass报错，其次想自己写个vue2后台，感觉sass写起来科学点。但是……版本这个东西……太费劲了……

vue2-cli集成webpack，使用vue create 项目名后再安装sass相当于在webpack的基础上安装sass。需要安装sass依赖包 sass-loader,以及它的依赖包sass-loader。看很多教程说在build/webpack.config.js中再改东西，但是我用vue2创建的项目没找到这个文件先忽略。

安装环境：

win10

webpack 5.75 //系统全局

vue2

@vue/cli 4.5.14//重点

安装步骤：

vue create testsass

cd testsass

npm i sass-loader

npm i node-sass
npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to 
@npmcli/fs
npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to 
@npmcli/fs

added 140 packages in 11s

贴出来就想证明下，这步没报错……

npm i node-sass

报错：

npm i sass-loader
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0" from @intervolga/[email protected]   
npm ERR!   node_modules/@intervolga/optimize-cssnano-plugin
npm ERR!     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/[email protected]
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.14" from the root project        
npm ERR!       4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)       
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from @soda/[email protected]
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/[email protected]
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.14" from the root project        
npm ERR!       4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)       
npm ERR!   19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! sass-loader@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from [email protected]
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!
npm ERR! See C:\Users\ZHAA\AppData\Local\npm-cache\eresolve-report.txt for a full 
report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ZHAA\AppData\Local\npm-cache\_logs\2022-11-19T07_58_28_099Z-debug.log

根据内容大概意思，找到webpack环境4.46.0需要5版本及以上，就是安装的版本高了。

找到问题查版本……

npm 13:sass-loader - npm

npm 13 git:https://github.com/webpack-contrib/sass-loader/blob/master/package.json

确实如报错所说……

然后用上述方法看了 从7版本到13版本的，都是5.0以上，但是通过实践7版本是可以按的。

npm i sass-loader@7          

added 5 packages in 3s

npm uninstall sass-loader

removed 5 packages in 3s

D:\workspace\html\vue\testsass>npm i sass-loader@8       
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/node-sass
npm ERR!   node-sass@"^8.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional node-sass@"^4.0.0" from [email protected]
npm ERR! node_modules/sass-loader
npm ERR!   sass-loader@"8" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/node-sass
npm ERR!   peerOptional node-sass@"^4.0.0" from [email protected]
npm ERR!   node_modules/sass-loader
npm ERR!     sass-loader@"8" 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!
npm ERR! See C:\Users\ZHAA\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ZHAA\AppData\Local\npm-cache\_logs\2022-11-19T08_31_26_140Z-debug.log

事实证明，就是7好使……但是后面还是有问题……

改testsass\src\components\HelloWord.vue：