Vueでsass, scssが使えない

Question

Vue CLI4.5.12でsassが使えなく困っています。

1.まず何もインストールしない状態でVueRouterをインストールして生成されたAbout.vueを編集しました。
2.するとエラーが出ます。（当然）

3.言われたとおりsass-loaderをインストールしようと思い試みてもエラでインストールされません。（コンソールで実行）
4.コンソール上からできなかったため、VueCli上からインストールしてみるとエラーメッセージが変わります…


原因は何なのでしょうか？

各種バージョン

npm 7.7.5
Vue/CLI 4.5.12
Vue 3.0.9
vue/compiler-sfc 3.0.9
babel-eslint 10.1.0
eslint 6.8.0

コード

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<style scoped lang="sass">
  div{
    color: orange;
  }
</style>

3のエラー

> npm install 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@"^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.12
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.12
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" 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.0
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.12
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.12
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" 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: webpack@5.28.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from sass-loader@11.0.1
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\ryoum\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\ryoum\AppData\Local\npm-cache\_logs\2021-03-30T11_43_23_181Z-debug.log

C:\Users\ryoum\AppData\Local\npm-cache\_logs\2021-03-30T11_43_23_181Z-debug.logの内容は以下です。

0 verbose cli [
0 verbose cli   'C:\Program Files\nodejs\node.exe',
0 verbose cli   'C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
0 verbose cli   'install',
0 verbose cli   'sass-loader'
0 verbose cli ]
1 info using npm@7.7.5
2 info using node@v15.12.0
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 3ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:C:\Program1\mycontrol.npmrc Completed in 0ms
10 timing config:load:project Completed in 0ms
11 timing config:load:file:C:\Users\ryoum.npmrc Completed in 0ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\ryoum\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setEnvs Completed in 1ms
17 timing config:load Completed in 7ms
18 timing npm:load:configload Completed in 8ms
19 timing npm:load:setTitle Completed in 0ms
20 timing npm:load:setupLog Completed in 0ms
21 timing npm:load:cleanupLog Completed in 1ms
22 timing npm:load:configScope Completed in 0ms
23 timing npm:load:projectScope Completed in 1ms
24 timing npm:load Completed in 12ms
25 timing config:load:flatten Completed in 2ms
26 timing arborist:ctor Completed in 0ms
27 timing idealTree:init Completed in 469ms
28 timing idealTree:userRequests Completed in 2ms
29 silly idealTree buildDeps
30 silly fetch manifest sass-loader@*
31 verbose shrinkwrap failed to load node_modules/.package-lock.json out of date, updated: node_modules
32 http fetch GET 304 https://registry.npmjs.org/sass-loader 541ms (from cache)
33 silly fetch manifest fibers@>= 3.1.0
34 http fetch GET 304 https://registry.npmjs.org/fibers 34ms (from cache)
35 silly fetch manifest node-sass@^4.0.0 || ^5.0.0
36 http fetch GET 304 https://registry.npmjs.org/node-sass 42ms (from cache)
37 silly fetch manifest sass@^1.3.0
38 http fetch GET 304 https://registry.npmjs.org/sass 58ms (from cache)
39 silly fetch manifest webpack@^5.0.0
40 http fetch GET 304 https://registry.npmjs.org/webpack 48ms (from cache)
41 timing idealTree Completed in 1217ms
42 timing command:install Completed in 1223ms
43 verbose stack Error: unable to resolve dependency tree
43 verbose stack     at Arborist.[failPeerConflict] (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1157:25)
43 verbose stack     at Arborist.[placeDep] (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1256:32)
43 verbose stack     at C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:851:46
43 verbose stack     at Array.map (<anonymous>)
43 verbose stack     at Arborist.[buildDepStep] (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:851:8)
43 verbose stack     at async Arborist.buildIdealTree (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:209:7)
43 verbose stack     at async Promise.all (index 1)
43 verbose stack     at async Arborist.reify (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:131:5)
43 verbose stack     at async Install.install (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\lib\install.js:137:5)
44 verbose cwd C:\Program1\mycontrol
45 verbose Windows_NT 10.0.19042
46 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install" "sass-loader"
47 verbose node v15.12.0
48 verbose npm  v7.7.5
49 error code ERESOLVE
50 error ERESOLVE unable to resolve dependency tree
51 error
52 error Found: webpack@4.46.0
52 error node_modules/webpack
52 error   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
52 error   node_modules/@intervolga/optimize-cssnano-plugin
52 error     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.12
52 error     node_modules/@vue/cli-service
52 error       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.12
52 error       node_modules/@vue/cli-plugin-babel
52 error         dev @vue/cli-plugin-babel@"~4.5.0" from the root project
52 error       4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
52 error   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.0
52 error   node_modules/@soda/friendly-errors-webpack-plugin
52 error     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@4.5.12
52 error     node_modules/@vue/cli-service
52 error       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.12
52 error       node_modules/@vue/cli-plugin-babel
52 error         dev @vue/cli-plugin-babel@"~4.5.0" from the root project
52 error       4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
52 error   19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
52 error
52 error Could not resolve dependency:
52 error sass-loader@"*" from the root project
52 error
52 error Conflicting peer dependency: webpack@5.28.0
52 error node_modules/webpack
52 error   peer webpack@"^5.0.0" from sass-loader@11.0.1
52 error   node_modules/sass-loader
52 error     sass-loader@"*" from the root project
52 error
52 error Fix the upstream dependency conflict, or retry
52 error this command with --force, or --legacy-peer-deps
52 error to accept an incorrect (and potentially broken) dependency resolution.
52 error
52 error See C:\Users\ryoum\AppData\Local\npm-cache\eresolve-report.txt for a full report.
53 verbose exit 1

Answer 1

node-sassはインストールされましたか？
またsass-loaderが最新版ですとエラーが出てしまう可能性があるようですので、
一旦sass-loaderをアンインストールしてバージョンを落として再インストールしてみてはいかがでしょうか