질문
React typescript 프로젝트에서 SASS / SCSS 를 사용하는 것과 약간 혼란 스럽습니다. 반응 프로젝트에서 SASS / SCSS 를 사용하는 방법에 대한 기사를 찾았습니다. https://create-react-app.dev/docs/adding-a-sass-stylesheet.tsxcomponent 파일에서 .scss파일을 가져 오는 것 같지만 다음과 같이 완벽하게 작동합니다.
import './component-1.scss';
그렇다면 scss파일을 빌드하고 css 로 컴파일하는 것은 어떻습니까? 브라우저가 scss파일을 이해할 수 있다면 왜 필요합니까? 아니면 여기서 잘못 이해하고 있습니까?scss파일을 컴파일해야하고 다음과 같은 component에서 컴파일 된 css파일을 가져와야하는 경우 :
import './component-1.css';
그러면 디렉토리에 scss 파일 만 있기 때문에 컴파일하기 전에 어떻게이 작업을 수행 할 수 있습니까?
답변1
브라우저가 SCSS를 이해하지 못합니다. 애플리케이션이 빌드되면 SCSS가 CSS로 변환됩니다. 이러한 SCSS 파일 가져오기는 기본적으로 응용 프로그램으로 변환되어 브라우저가 사용하는 일반 이전 CSS를 가져옵니다.
소스 파일의 코드는 빌드 프로세스의 출력이 어떻게 보이는지 나타내지 않습니다. JSX를 사용하여 React 파일을 작성할 수있는 것과 같은 방식이지만, 브라우저가 JSX를 이해하지 못하기 때문에 앱을 빌드 할 때 일반 이전 JS로 변환됩니다.
답변2
관행은 SASS 또는 LESS와 같은 CSS 전처리기를 사용하여 개발 프로세스를 용이하게하는 것입니다. 브라우저는 그것들을 이해하지 못합니다. CSS 파일로 컴파일하는 두 가지 메소드가 있습니다.
Gulp및 Grunt 와 같은 작업 실행기 또는 Webpack 과 같은 번 들러 (적절한 로더 포함) 사용.Koala 와 같은 소프트웨어를 사용하여 수동으로 컴파일합니다 (개발 프로세스에서는 권장되지 않음).
Webpack 또는 다른 번 들러를 사용하는 경우 sass 파일을 가져오고 적절한 로더 (Webpack의 경우 ass-loader)를 추가 한 다음 Webpack이 나머지 작업을 수행하도록하는 것뿐입니다. Webpack은 컴파일 및 번들링을 처리합니다.
출처 : https://stackoverflow.com/questions/63112905/which-files-should-be-imported-in-react-tsx-if-we-are-using-sass
