[javascript] React Component에서 CSS 파일을 가져 오는 방법
CSS 파일을 반응 구성 요소로 가져오고 싶습니다.
시도 import disabledLink from "../../../public/styles/disabledLink";
했지만 아래 오류가 발생합니다.
모듈을 찾을 수 없음 : 오류 : c : \ Users \ User \ Documents \ pizza-app \ client \ src \ components @에서 ‘file’또는 ‘directory’../../../public/styles/disabledLink를 확인할 수 없습니다. /client/src/components/ShoppingCartLink.js 19 : 20-66 Hash : 2d281bb98fe0a961f7c4 버전 : webpack 1.13.2
C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css
로드하려는 CSS 파일의 위치입니다.
나에게 가져 오기가 올바른 경로를 찾지 못하는 것 같습니다.
나는 ../../../
그것으로 위의 세 폴더 레이어 경로를 찾기 시작할 것이라고 생각 했습니다.
C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js
CSS 파일을 가져와야하는 파일의 위치입니다.
내가 뭘 잘못하고 있으며 어떻게 고칠 수 있습니까?
답변
다음을 수행 할 필요가없는 경우 이름을 지정할 필요도 없습니다.
예 :
import React from 'react';
import './App.css';
여기에서 전체 예제를 참조하십시오 ( React Component로 JSX Live Compiler 빌드 ).
답변
당신은 사용할 필요가 CSS-로더를 웹팩로 번들을 만들 때.
그것을 설치하십시오 :
npm install css-loader --save-dev
웹팩 구성의 로더에 추가하십시오.
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
// ...
]
}
};
그런 다음 js에 css 파일을 포함 할 수 있습니다.
답변
CSS 모듈을 사용하는 것이 좋습니다.
반응
import React from 'react';
import styles from './table.css';
export default class Table extends React.Component {
render () {
return <div className={styles.table}>
<div className={styles.row}>
<div className={styles.cell}>A0</div>
<div className={styles.cell}>B0</div>
</div>
</div>;
}
}
컴포넌트 렌더링 :
<div class="table__table___32osj">
<div class="table__row___2w27N">
<div class="table__cell___2w27N">A0</div>
<div class="table__cell___1oVw5">B0</div>
</div>
</div>
답변
다음은 React 컴포넌트에서 외부 CSS 파일을 가져오고 <head />
웹 사이트 의 CSS 규칙을 출력합니다 .
npm install --save-dev style-loader
npm install --save-dev css-loader
- webpack.config.js에서 :
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
- 구성 요소 파일에서 :
import './path/to/file.css';
답변
위의 솔루션은 완전히 변경되어 더 이상 사용되지 않습니다. CSS 모듈을 사용하고 싶다면 (css-loader를 가져 왔다고 가정하고) 오랫동안 이것에 대한 답을 찾으려고 노력해 왔으며 마침내 그렇게했습니다. 기본 웹팩 로더는 새 버전에서 상당히 다릅니다.
웹팩에서 cssRegex로 시작하는 부분을 찾아서 이것으로 교체해야합니다.
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}),
}
답변
CSS 모듈을 사용하면 이름 충돌에 대한 걱정없이 다른 파일에서 동일한 CSS 클래스 이름을 사용할 수 있습니다.
Button.module.css
.error {
background-color: red;
}
another-stylesheet.css
.error {
color: red;
}
Button.js
import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
render() {
// reference as a js object
return <button className={styles.error}>Error Button</button>;
}
}
답변
-
스타일 로더 및 CSS 로더 설치 :
npm install --save-dev style-loader npm install --save-dev css-loader
-
웹팩 구성
module: { loaders: [ { test: /\.css$/, loader: 'style-loader' }, { test: /\.css$/, loader: 'css-loader', query: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } } ] }