Create React App v2 sass-loader 설정

Create React App v2 사용 시 sass-loader 설정

환경

• CRA v2

node-sass, sass-loader 설치

• 터미널에서 명령어 npm install --save node-sass sass-loader 입력

Path 수정

1. node_moduless 폴더에서 react-scripts 폴더로 이동


2. config폴더의 webpack.config.js 열기


3. "cssRegex", "cssModuleRegex" 검색 후 변수 값 변경


• css -> (css|scss)









4. "file-loader" 검색 후 'exclude' property안의 배열에 /\.scss$/ 추가









5. "cssRegex" 검색 시 test : cssRegex의 같은 레벨의 property인 use 안에 아래 코드 추가

modules: true, localIdentName: "[name]_[local]_[hash:base64:5]"


















6. postcss-loader 검색 후 loader: 아래에 코드 추가

{ loader: require.resolve('sass-loader'), options: cssOptions }