https://thebook.io/080203/0296/
<리액트를 다루는 기술 9장>
sass loader를 커스터마이징하면 scss파일에 @import구문을 생략할 수 있다.
책에서 커스터 마이징하는 방법은
1. webpack.config.js 파일을 연다.
2. ctrl+F키를 눌러서 sassReg중 두번째 결과인 것을 클릭한다.
3. options에서 data :@import 'utils'; 로 수정해야한다.로 나와있었다.
❗이렇게 진행 하면 다음과 같은 에러를 볼것이다.
에러가 두번이나 발생하였다.
첫번째 에러: includePaths라는 옵션은 없다
두번째 에러: data라는 옵션은 없다
옵션이 정해져있는데 그와 맞지 않는 것을 사용한 것이다.
sass-loader의 옵션은 현재 2024년 9월
기준으로 implementation?, api?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? 이 있다.
- sassOptions
웹팩문서를 참고하니 sassoption은 다음과 같이 사용한다.
출처 : 웹팩문서
이 자료를 보고
options : { includePaths: [paths.appSrc + "/styles"],}에서
options:{ sassOptions:{includePaths:[paths.appSrc + "/styles"],}로 수정하였다.
- additionalData
웹팩문서에서 additionalData와 관련된 자료이다.
-additional data옵션은 Sass 엔트리 파일 앞에 / 코드를 추가하는 것이다. 따라서data:@import 'utils';에서additionalData:@import 'utils';로 수정하였다.
