[SCSS] SCSS 설치, 설정하기

SCSS

• 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 SASS/SCSS
• 중첩, 변수 선언, 연산자 등 많은 장점

scss 설치하기

npm i -g sass

scss파일 만든 후(Watch Sass클릭) import 시킨 후 오류 발생

ERROR in ./src/styles/banner.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1]......
Module build failed (from ./node_modules/resolve-url-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'replace')...

-시도1.

• 파이썬 설치
• npm install --global windows-build-tools 해도 안됨

-원인: loader설치를 하지 않아 module에 없어서 발생된 오류

-해결: npm i sass sass-loader -D

Scss 설정하기

1. ctrl+, 설정 => scss settings.json live sass compiler검색 

   

2. 아래 코드로 설정

"liveSassCompile.settings.generateMap": false,
"git.autofetch": true,
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": null,
    "savePathReplacementPairs": null
  }
 ],

SCSS사이트

참고사이트