Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

npm install -D sass-loader node-sass Vue.js 2021

Hi issue is setting up SASS for Vue.js I run: Node.js - 15.7.0 Vue.js - @vue/cli 4.5.11 This is an error in the console I am having while running this command: npm install -D sass-loader node-sass

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"2 || 3 || 4" from [email protected]
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^7.1.1" from the root project
npm ERR!   peer webpack@"^3.1.0" from [email protected]
npm ERR!   node_modules/extract-text-webpack-plugin
npm ERR!     dev extract-text-webpack-plugin@"^3.0.0" from the root project
npm ERR!   8 more (file-loader, friendly-errors-webpack-plugin, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.36.0 || ^5.0.0" from [email protected]
npm ERR!   node_modules/sass-loader
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\marko\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\marko\AppData\Local\npm-cache\_logs\2021-01-28T16_11_07_342Z-debug.log
like image 727
Marko_TON Avatar asked Jan 28 '21 16:01

Marko_TON


People also ask

How do I add SCSS to Vue 3?

Install vue 3 If you have the Vue CLI tool, just run vue create scss and select Vue 3. There is an option to set up CSS pre processors from the CLI tool but for this article I will ignore that option. Once set up, cd scss to move into that directory.

Does sass-loader require node sass?

Getting Started. sass-loader requires you to install either Dart Sass, Node Sass on your own (more documentation can be found below) or Sass Embedded. This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.


2 Answers

I had the same problem today. Try installing sass-loader v10.0.5 instead:

npm install -D [email protected] node-sass
like image 152
Alfredo L'huissier Avatar answered Oct 18 '22 17:10

Alfredo L'huissier


Actually, there's a note about this issue in Vue CLI docs:

When using webpack version 4, the default in Vue CLI 4, you need to make sure your loaders are compatible with it. Otherwise you will get errors about confliciting peer dependencies. In this case you can use an older version of the loader that is still compatible with webpack 4.

npm install -D sass-loader@^10 sass

like image 43
mirkinoid Avatar answered Oct 18 '22 17:10

mirkinoid