React Component에서 CSS 파일을 가져 오는 방법

89

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 파일을 가져와야하는 파일의 위치입니다.

내가 뭘 잘못하고 있으며 어떻게 고칠 수 있습니까?

javascript reactjs relative-path

— 배
소스

이봐 무슨 일이야 : D는, 그것의 외모 (부품 및 SRC) 위의 두 폴더처럼

— Steeve Pitis

이봐, 당신 말이 맞지만 여전히 작동하지 않습니다. 난 내가 CSS 파일 내에서 수출을 사용할 수 없기 때문에 내가 가져 오기를 사용할 수없는 것으로 나타났습니다

— 벤터

이 방법의 사용 stackoverflow.com/questions/39926493/...을

— 베어

오류-> @media only screen and (min-width : 320px) and (max-width : 640px) {^ SyntaxError : Invalid or expected token at Module._compile (internal / modules / cjs / loader.js : 723) : 23)

— Sadanand

150

다음을 수행 할 필요가없는 경우 이름을 지정할 필요도 없습니다.

예 :

import React from 'react';
import './App.css';

여기에서 전체 예제를 참조하십시오 ( React Component로 JSX Live Compiler 빌드 ).

— code4jhon
소스

4

나를 위해 작동하지 않습니다, babel 레지스터로 mocha를 실행하려고하면 I : \ .... css : 1 (function (exports, require, module, __filename, __dirname) {.filter-bg {^ SyntaxError : Unexpected token.

— JGleason

3

또는 react-helmet을 사용하고 <head> 태그에 CSS (URL 인 경우)를 삽입합니다

— Kira

52

당신은 사용할 필요가 CSS-로더를 웹팩로 번들을 만들 때.

그것을 설치하십시오 :

npm install css-loader --save-dev

웹팩 구성의 로더에 추가하십시오.

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...
    ]
  }
};

그런 다음 js에 css 파일을 포함 할 수 있습니다.

— 알렉산드르 라자레프
소스

1

이 프로젝트에 다른 모듈을 가져올 수 없습니다. 그들의 또 다른 솔루션은 reactjs 또는 native js에서만 작동합니까?

— venter

그래서 저는 다음과 같은 것을 사용해야한다고 생각합니다 : HTMLElement.style

— venter

조금 못 생겼습니다. 번들 빌드에 변경 사항을 추가 할 수없는 이유는 무엇입니까?

— Alexandr Lazarev

그것은 reactjs에 대한 workship에 대한 후 처리 그리고 우리는 workship 중에 포함 된 모듈과 요구 사항을 해결하기 위해 듣는다

— 벤터

좋아, 그러나 질문에서 요청한 것처럼 스타일 태그를 가져 오는 것이 CSS 파일을 가져 오지 않는다는 것을 언급하고 싶었습니다 . 두 가지 문제가 있습니다.

— Alexandr Lazarev

31

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>

— 미 히르 파텔
소스

아래 답변으로 파트 1을 추가합니다. 그리고 내 대답을 따라 구성 요소를 테스트 할 수 있습니다.

— Mihir Patel

2

이것을 시도해도 작동하지 않습니다. 나는 이런 식으로 포함하도록 시도했다 : import styles from "./disabledLink.css";다음과 같은 오류 얻을 : 모듈을 찾을 수 없습니다 오류 : \ 사용자 \ Basti Kluth \ 문서 \ 피자 응용 프로그램 : 수 없습니다 해결 '파일'또는 C '디렉토리'./disabledLink.css을 \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19 : 20-49

— venter

1

css 모듈은 따로 설치해야합니다. github.com/css-modules/css-modules

— Alexandr Lazarev

1

그런 유형의 CSS, 아이디어에 대한 미디어 쿼리를 어떻게 작성할 수 있습니까?

— Sonu Bamniya

18

다음은 React 컴포넌트에서 외부 CSS 파일을 가져오고 <head />웹 사이트 의 CSS 규칙을 출력합니다 .

스타일 로더 및 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';

— Webars
소스

그리고 나는 바벨을 사용하여 감시자를 실행합니다. 아마 모두의 webpack.config.js 파일로 볼 수 없습니다

— 안톤 Danilchenko

css-loader를 설치 했습니까? 또한 webpack.config.js가 표시되지 않습니다.

— Webars

1

객체 형식의 더 많은 모듈 규칙을 rules배열의 값 으로 추가 할 수 있습니다 .

— 아리

3

위의 솔루션은 완전히 변경되어 더 이상 사용되지 않습니다. CSS 모듈을 사용하고 싶다면 (css-loader를 가져 왔다고 가정하고) 오랫동안 이것에 대한 답을 찾으려고 노력해 왔으며 마침내 그렇게했습니다. 기본 웹팩 로더는 새 버전에서 상당히 다릅니다.

웹팩에서 cssRegex로 시작하는 부분을 찾아서 이것으로 교체해야합니다.

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}

— 우 구르 일 마즈
소스

stackoverflow.com/questions/53572200/… 대체 솔루션

— Maulik Sakhida 2010 년

1

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>;
  }
}

— 아마레 쉬 티 와리
소스

1

스타일 로더 및 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]'
                }
            }
        ]
    }

— 베르 트윈 로메로
소스

0

전체 스타일 시트를 번들로 묶지 않고 스타일 시트의 일부 스타일을 구성 요소에 삽입하려는 경우 https://github.com/glortho/styled-import를 권장 합니다. 예를 들면 :

const btnStyle = styledImport.react('../App.css', '.button')

// btnStyle is now { color: 'blue' } or whatever other rules you have in `.button`.

참고 : 저는이 lib의 저자이며 스타일과 CSS 모듈을 대량으로 가져 오는 것이 최선이거나 가장 실행 가능한 솔루션이 아닌 경우를 위해 빌드했습니다.

— 글 로르 토
소스

0

필요한 모듈을 사용할 수도 있습니다.

require('./componentName.css');
const React = require('react');

— 후안 나바 레테
소스

0

extract-css-chunks-webpack-plugin 및 css-loader 로더를 사용하면 아래를 참조하십시오.

webpack.config.js 가져 오기 extract-css-chunks-webpack-plugin

const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

webpack.config.js css 규칙을 추가하고 먼저 css 청크를 추출한 다음 css 로더 css-loader가이를 html 문서에 포함하고 css-loader 및 extract-css-chunks-webpack-plugin이 package.json dev에 있는지 확인합니다. 종속성

rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunks.loader,
          },
          'css-loader',
        ],
      }
]

webpack.config.js 플러그인의 인스턴스 만들기

plugins: [
    new ExtractCssChunks({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

이제 css 가져 오기가 가능합니다. 그리고 이제 index.tsx와 같은 tsx 파일에서이 가져 오기 './Tree.css'와 같은 가져 오기를 사용할 수 있습니다. 여기서 Tree.css에는 다음과 같은 CSS 규칙이 포함됩니다.

body {
    background: red;
}

내 앱은 typescript를 사용하고 있으며 이것은 나를 위해 작동합니다. https://github.com/nickjohngray/staticbackeditor에 대한 내 저장소를 확인 하십시오.

— 새긴 금
소스

-2

.css파일로 .jsx파일을 가져올 수 있습니다.

다음은 예입니다.

import Content from '../content/content.jsx';

— 사우 라브 람 찬드라 라오 쿨 카르 니
소스