vue项目sass-loader安装(vue项目sass-loader安装错误解决)

1.安装sass的依赖包

npm install --save-dev sass-loader

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: vue3@0.1.0
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm ERR!   node_modules/@intervolga/optimize-cssnano-plugin
npm ERR!     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.17
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.17
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.15" 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/friendly-errors-webpack-plugin@1.8.1
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@4.5.17
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.17
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.15" 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! dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.72.1
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from sass-loader@13.0.0
npm ERR!     dev 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\lilin\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\lilin\AppData\Local\npm-cache\_logs\2022-05-20T03_43_58_651Z-debug-0.log

（若出错，因为sass-loader版本过高导致，可以将其package.json中的版本改为7.3.1，然后再重新安装sass-loader包，若是还过高，则重装6.x,cnpm i sass-loader@6.x --save-dev或者npm i sass-loader@6.x --save-dev）

2.//sass-loader依赖于node-sass,所以要安装node-sass

npm install --save-dev node-sass

3.在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

注意：下面这个 加不加视情况定（css的）

 {
    test:/\.css$/,
    loader:'style-loader'
 },
 {
    test:/\.css$/,
    loader:'css-loader'
 },

4.在APP.vue中修改style标签

<style lang="scss">

5.然后运行项目

$ npm run dev
npm run serve