맥북 M1 scss 에러 해결방법

Web

맥북 M1 scss 에러 해결방법

2021. 7. 31. 16:51

여차저차 갖가지 에러를 해결하며 프로젝트에 맞는 npm install 성공 완료!

그리고 npm run start

에러…

import된 css들이 제대로 컴파일이 되지 않는 것 같았습니다. 찾아보니 sass 팀에선 더이상 node-sass를 지원하지 않는다고 합니다. 이는 최신 m1 환경도 지원하지 않는 다는 소리.
공식 사이트에서 dart-sass를 이용하라고 말합니다.

We no longer recommend LibSass for new Sass projects. Use Dart Sass instead.
If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your package.json file with sass. Both packages expose the same JavaScript API.

참고: LibSass is Deprecated

SASS 설치하기

// 설치된 node-sass가 있다면 삭제
$ npm uninstall node-sass

// Dart Sass(=sass) 설치
$ npm i sass -D 

Webpack 설정하기

// 기존
{
 test: /\.s[ac]ss$/i,
 use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}

// 수정 
{
	test: /\.s[ac]ss$/i,
	use: [
		'style-loader',
		'css-loader',
		{
		loader: 'sass-loader',
		options: {
				implementation: require('sass')
			},
		},
	],
}

참고
webpack에서 dart-sass사용하기