purgecss를 통해 CSS 파일을 업데이트할 수 없는 이유는 무엇입니까?

Question

SASS를 사용하여 미니 CSS 라이브러리를 구현하고 있는데 이를 제거하고 싶습니다. 현재 purgecss를 사용하고 있으며 아무런 문제가 없지만 CSS 라이브러리의 클래스를 내 HTML에 추가할 때 한 가지 문제가 있습니다. , 해당 특정 클래스는 제거 파일에 포함되지 않습니다. 해당 특정 클래스를 포함하려면 CSS 라이브러리 CSS 파일을 다시 제거해야 하지만 CSS 파일을 모니터링하고 프로젝트에 추가할 때 클래스를 추가하려면 purgecss가 필요합니다. CSS 파일을 다시 지울 필요가 없습니다. 어떤 아이디어가 있습니까?

Answer 1

CSS 파일을 수동으로 다시 제거할 필요 없이 CSS 라이브러리의 클래스를 동적으로 포함하려면 PurgeCSS의 추가 기능 구성 파일과 함께 PurgeCSS를 사용하여 CSS 파일을 모니터링하고 특정 클래스를 포함할 수 있습니다.

설정 방법은 다음과 같습니다.

1. PurgeCSS 구성 파일 생성: 먼저 PurgeCSS에 대한 별도의 구성 파일을 생성하고 이름을 purgecss.config.js로 지정하겠습니다. 이 파일은 정리할 파일과 기타 구성 옵션을 지정합니다.

으아악

2. 빌드 프로세스 구성: CSS 파일을 모니터링하고 변경 사항이 발생할 때 PurgeCSS를 트리거하도록 빌드 프로세스를 구성해야 합니다. Webpack, Gulp 또는 Grunt와 같은 도구를 사용하여 이 작업을 수행할 수 있습니다. Webpack을 사용한 예는 다음과 같습니다.

으아악

3. 빌드 프로세스 시작: 이제 CSS 라이브러리의 클래스를 HTML 파일에 추가할 때마다 빌드 프로세스가 자동으로 변경 사항을 모니터링하고 추가한 특정 클래스를 포함하도록 PurgeCSS를 트리거합니다.

위 스니펫의 경로와 파일 이름을 프로젝트 구조에 맞게 조정하세요. 또한 다른 빌드 시스템이나 도구를 사용하는 경우 그에 따라 구성을 조정해야 할 수도 있습니다.

이 설정을 사용하면 CSS 라이브러리의 클래스를 프로젝트에 추가할 때마다 CSS 파일을 수동으로 다시 지울 필요가 없습니다. 대신 PurgeCSS는 변경 사항을 모니터링하고 빌드 프로세스 중에 이러한 클래스를 동적으로 포함합니다.