WebPack이 패키지화되면 Raw-Loader가로드 한 HTML 파일은 CSS 클래스 이름을 구문 분석 할 수없는 경우 어떻게해야합니까?

WebPack이 패키지화되면 Raw-Loader를 사용하여 Tailwind CSS 클래스 이름 (예 : Header.html)이 포함 된 HTML 파일을로드하면 클래스 이름을 구문 분석 할 수없는 일반적인 문제가 발생합니다. 이 기사는 자세한 솔루션을 제공합니다.

문제 : index.html을 소개 할 때 Header.html 및 Header.html은 Tailwind CSS 클래스 이름을 사용합니다. WebPack은 mini-css-extract-plugin 및 postcss-loader 와 같은 플러그인으로 구성 되더라도 Tailwind CSS 클래스 이름을 정확하게 정리할 수는 없습니다.

원인 : 원시 로더는 HTML 파일 컨텐츠를 문자열로 처리합니다. Webpack은 그 안에 포함 된 Tailwind CSS 클래스 이름을 인식 할 수 없으므로 Tailwind CSS 프로세서가 이러한 클래스 이름을 찾고 처리하지 못하게됩니다.

솔루션 : Tailwind CSS (Tailwind CSS v3의 content 옵션)의 purge 옵션을 사용하여 프로세스 파일 경로를 명시 적으로 지정하십시오. tailwind.config.js 파일에서 구성을 수정하십시오.

 module.exports = {
  내용 : [ './src/* .html', './src/base/* .html'], // html 파일 경로를 지정하여 darkmode : false, // 또는 'media'또는 'class'
  주제: {
    연장하다: {},
  },
  변형 : {
    연장하다: {},
  },
  플러그인 : [],
};

Tailwind CSS 클래스 이름이 포함 된 HTML 파일 경로를 content 배열에 추가하십시오 (예 : './src/*.html' 및 './src/base/*.html' ). Tailwind CSS는 이러한 파일을 스캔하고 클래스 이름을 추출한 후 최종 생성 된 CSS 파일에 포함되어 있는지 확인합니다. 실제 프로젝트 구조에 따라 파일 경로를 조정하십시오. 이는 WebPack이 Raw-Loader에서로드 한 HTML 파일에서 Tailwind CSS 클래스 이름을 인식 할 수없는 문제를 해결합니다.

위 내용은 WebPack이 패키지화되면 Raw-Loader가로드 한 HTML 파일은 CSS 클래스 이름을 구문 분석 할 수없는 경우 어떻게해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!