React가 CSS를 구문 분석할 수 없으면 어떻게 해야 합니까?

웹팩이 "css/less" 파일의 로더를 구성할 때 모듈화가 기본적으로 활성화되지 않거나 잘못된 도입 방법으로 인해 React가 CSS를 구문 분석할 수 없습니다. 해결 방법: 1. 웹팩 2의 로더 구성을 변경합니다. . "index.css" 파일에서 "@import '~antd/dist/antd.css';"를 통해 가져올 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React가 CSS를 구문 분석할 수 없으면 어떻게 해야 하나요?

• react 외부 CSS 파일의 모듈식 도입은 적용되지 않습니다. 외부 CSS/less 파일을 React에 도입할 때 직접 가져오는 경우 => import "./search.less";

직접 사용할 때 사용하세요. className은 아래와 같습니다.

그러나 이 방법을 사용하여 "./search.less";

에서 스타일 가져오기를 도입하면 아래와 같이 스타일이 적용되지 않는 것을 알 수 있습니다.

이유는 webpack이 css/less 파일의 로더를 구성할 때 기본적으로 모듈화가 활성화되지 않기 때문입니다. 이 모듈식 접근 방식을 도입하려면 아래와 같이 webpack의 로더 구성을 변경해야 합니다.

React에 antd 스타일 도입 효과가 없나요?

• 코드 작성 시에는 antd 컴포넌트를 사용하는 것이 더 편리한 것 같아요(antd도 기밀성이 매우 높지만)

이전에도 그랬는데, antd 다운로드 문제로 인해 npm을 사용하는 소스를 중국에서 사용할 수 없습니다. . 그래도 안되면 타오바오 미러소스를 이용하시면 됩니다

그런데 이번에는 antd 스타일이 적용되지 않는 문제가 있어서 antd를 여러번 설치해봤습니다. npm, cnpm, Yarn을 시도해 보았지만 여전히 작동하지 않았습니다

그래서 온라인으로 검색했지만 해결 방법이 하나도 맞지 않는 것 같습니다. 그러다가 공식 홈페이지에 가서 소개 방법

을 살펴보았습니다. 다음과 같은 표현이 있습니다:

내 코드는 scr 아래의 다른 폴더에 작성되었으며 js 파일은 해당 CSS 파일을 생성하지 않으므로 antd/dist/antd.css

를 도입할 필요가 없습니다. 그래서 항목 파일 인덱스 파일의 CSS에 도입해야 한다고 생각했는데

해결책:

1.antd가 성공적으로 도입되었는지 확인하세요몇 번 더 시도하십시오. 많은 경고, 설명이 멈춤

npm i antd
cnpm i antd
yarn add antd

2. index.css 파일에 소개:

@import '~antd/dist/antd.css';

추천 학습: "

react video Tutorial

》

위 내용은 React가 CSS를 구문 분석할 수 없으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!