SASS를 사용하여 미니 CSS 라이브러리를 구현하고 있는데 이를 제거하고 싶습니다. 현재 purgecss를 사용하고 있으며 아무런 문제가 없지만 CSS 라이브러리의 클래스를 내 HTML에 추가할 때 한 가지 문제가 있습니다. , 해당 특정 클래스는 제거 파일에 포함되지 않습니다. 해당 특정 클래스를 포함하려면 CSS 라이브러리 CSS 파일을 다시 제거해야 하지만 CSS 파일을 모니터링하고 프로젝트에 추가할 때 클래스를 추가하려면 purgecss가 필요합니다. CSS 파일을 다시 지울 필요가 없습니다. 어떤 아이디어가 있습니까?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS 파일을 수동으로 다시 제거할 필요 없이 CSS 라이브러리의 클래스를 동적으로 포함하려면 PurgeCSS의 추가 기능 구성 파일과 함께 PurgeCSS를 사용하여 CSS 파일을 모니터링하고 특정 클래스를 포함할 수 있습니다.
설정 방법은 다음과 같습니다.
- PurgeCSS 구성 파일 생성: 먼저 PurgeCSS에 대한 별도의 구성 파일을 생성하고 이름을
으아악purgecss.config.js로 지정하겠습니다. 이 파일은 정리할 파일과 기타 구성 옵션을 지정합니다.- 빌드 프로세스 구성: CSS 파일을 모니터링하고 변경 사항이 발생할 때 PurgeCSS를 트리거하도록 빌드 프로세스를 구성해야 합니다. Webpack, Gulp 또는 Grunt와 같은 도구를 사용하여 이 작업을 수행할 수 있습니다. Webpack을 사용한 예는 다음과 같습니다.
으아악위 스니펫의 경로와 파일 이름을 프로젝트 구조에 맞게 조정하세요. 또한 다른 빌드 시스템이나 도구를 사용하는 경우 그에 따라 구성을 조정해야 할 수도 있습니다.
이 설정을 사용하면 CSS 라이브러리의 클래스를 프로젝트에 추가할 때마다 CSS 파일을 수동으로 다시 지울 필요가 없습니다. 대신 PurgeCSS는 변경 사항을 모니터링하고 빌드 프로세스 중에 이러한 클래스를 동적으로 포함합니다.