[Solved]: Vue sass-loader 관련 에러 정리

1. Failed to resolve loader: sass-loader

Vue에서 아래처럼 sass를 사용하고 있다가 npm run serve를 하니, 위와 같은 에러 메시지를 볼 수 있었다. 

 

<코드 예시>

<style lang="scss" scoped>
button {
  background: #1aab8a;
  color: #fff;
  border: none;
  position: relative;
  /* height: 60px; */
  padding: 0.5em 1em;
  cursor: pointer;
  transition: 800ms ease all;
  outline: none;
  margin: 1rem 0;
}
</style>

 

<에러 메시지>

Failed to resolve loader: sass-loader
You may need to install it.

 

<해결>

에러 메시지가 알려주는 대로 sass-loader를 install 해줬다. 

npm install sass-loader

그러니, 아래와 같이 새로운 에러가 다시 발생했다.

 

2. Module not found: Error: Can't resolve 'sass-loader'

 

<에러 코드>

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: client@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.15
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.15
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.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.15
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.15
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

 

<해결>

에러메시지를 살펴보니, dependency간에 생기는 conflict 라고 원인을 파악했고,
vue 홈페이지에서 살펴 보니 실제로 이것에 관련된 글이 작성 되어 있었다.

 

그냥 바로 npm i sass-loader를 하는 것이 아니라, 아래 명령어를 이용히여 dependency를 설치하니 정상적으로 작동하는 것을 볼 수 있었다.

npm install -D sass-loader@^10 sass