Isomiform React 컴포넌트에서의 CSS 파일 Import

Isomiform React 컴포넌트에서의 CSS 파일 Import

ES6에서 작성된 구성 요소가 포함된 리액트 응용 프로그램이 있으며, Babel 및 Webpack을 통해 변환됩니다.

react webpack cookbook에 제시된 바와 같이 특정 컴포넌트에 특정 CSS 파일을 포함시키고 싶은 곳도 있습니다.

단, 컴포넌트 파일에서 다음과 같은 정적 CSS 자산이 필요한 경우:

import '../assets/css/style.css';

그러면 컴파일이 실패하고 다음 오류가 발생합니다.

SyntaxError: <PROJECT>/assets/css/style.css: Unexpected character '#' (3:0)
    at Parser.pp.raise (<PROJECT>\node_modules\babel-core\lib\acorn\src\location.js:73:13)
    at Parser.pp.getTokenFromCode (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:423:8)
    at Parser.pp.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:106:15)
    at Parser.<anonymous> (<PROJECT>\node_modules\babel-core\node_modules\acorn-jsx\inject.js:650:22)
    at Parser.readToken (<PROJECT>\node_modules\babel-core\lib\acorn\plugins\flow.js:694:22)
    at Parser.pp.nextToken (<PROJECT>\node_modules\babel-core\lib\acorn\src\tokenize.js:98:71)
    at Object.parse (<PROJECT>\node_modules\babel-core\lib\acorn\src\index.js:105:5)
    at exports.default (<PROJECT>\node_modules\babel-core\lib\babel\helpers\parse.js:47:19)
    at File.parse (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:529:46)
    at File.addCode (<PROJECT>\node_modules\babel-core\lib\babel\transformation\file\index.js:611:24)

컴포넌트 파일에 CSS 파일을 저장하려고 하면 Babel 로더가 그것을 다른 소스로 해석하여 CSS를 Javascript로 변환하려고 합니다.

이게 예상된 건가요?이를 실현하기 위한 방법은 있습니까?트랜스파일링되지 않는 정적 자산을 명시적으로 참조할 수 있도록 하는 것입니다.

.js/jsx 자산과 CSS 자산 모두에 대해 다음과 같이 로더를 지정했습니다.

  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel'}
    ]
  }

전체 웹 팩 구성 파일 보기

자세한 내용은 다음과 같습니다.

webpack.common.js - 개발 및 운영 간에 속성을 공유할 수 있도록 사용하는 기본 웹 팩 구성입니다.

Gruntfile.js - 개발에 사용되는 Gruntfile.보시는 바와 같이 위의 웹 팩 구성이 필요하며 여기에 개발 속성을 추가해야 합니다.이것이 문제의 원인일까요?

Html.jsx - CSS를 Import 또는 요구하다HTML jsx 컴포넌트이것은 (Fluxbile을 사용한) 동형 앱이므로 실제 HTML을 렌더링 컴포넌트로 포함해야 합니다.어플리케이션의 어느 부분에서든 이 파일에 있는 require 문을 사용하면 설명된 오류가 나타납니다.

투덜거림과 관련이 있는 것 같아요.컴파일만 하면webpack --config webpack.common.js오류는 발생하지 않습니다.

간단한 답변:노드 런타임 오류입니다.동형 앱에서 서버에 CSS를 로드하려고 하는 것은 좋은 생각이 아닙니다.

서버에서 렌더링하는 컴포넌트에는 css를 필요로 할 수 없습니다.한 가지 방법은 css를 요구하기 전에 브라우저인지 확인하는 것입니다.

if (process.env.BROWSER) {
  require("./style.css");
}

하게 하려면 , , , , , , , , , , , , , , , , , , , , , , , , , , .process.env.BROWSER로로 합니다.false(또는 삭제)를 지정합니다.

delete process.env.BROWSER;
...
// other server stuff

로 설정합니다.true를 클릭합니다.이 작업을 수행하려면 구성 - webpack.config.js에서 webpack의 DefinePlugin을 사용합니다.

plugins: [
    ...
    new webpack.DefinePlugin({
        "process.env": {
            BROWSER: JSON.stringify(true)
        }
    })
]

gpbl의 Isomaphic500 앱에서 이를 확인할 수 있습니다.

ES6를 사용하여 동형 앱을 구축하고 서버 렌더링 시 CSS를 포함시키고 싶다면(첫 번째 HTTP 응답으로 클라이언트에 기본 스타일을 보낼 수 있도록 중요함) React Starter Kit에서 사용되는 ES7 데코레이터를 확인하십시오.

이 작은 아름다움은 사용자가 페이지를 처음 렌더링할 때 스타일을 사용하여 컨텐츠를 볼 수 있도록 합니다.이 기술을 활용하여 만든 이형 앱의 예를 소개합니다.코드베이스를 검색하기만 하면@withStyles어떻게 사용되는지 확인하세요.이런 식으로 진행됩니다.

import React, { Component, PropTypes } from 'react';
import styles from './ScheduleList.css';
import withStyles from '../../decorators/withStyles';

@withStyles(styles)
class ScheduleList extends Component {

동형 앱에서도 비슷한 문제가 있었습니다(다른 많은 문제는 여기에서 찾을 수 있습니다).CSS Import에 관한 문제에 대해서는 처음에 process.env를 사용하고 있었습니다.브라우저. 나중에 바벨 플러그-변환-요구-무시기로 전환했습니다.babel6와 완벽하게 연동됩니다.

.babelrc에 다음 섹션만 있으면 됩니다.

"env": {
   "node": {
     "plugins": [
       [
         "babel-plugin-transform-require-ignore", { "extensions": [".less", ".css"] }
       ]
     ]
   }
}

그런 다음 BABEL_ENV='node'로 앱을 실행합니다.이런 식으로:

BABEL_ENV='node' node app.js.

다음으로 실제 가동 구성의 예를 제시하겠습니다.

https://github.com/halt-hammerzeit/webpack-isomorphic-tools도 이용하실 수 있습니다.

또는 https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example 를 참조해 주세요.

저는 이 babel 플러그인을 성공적으로 사용하여 더 적은 svg, 이미지로 유사한 문제를 해결했습니다.단, js 이외의 자산에서는 동작합니다.

Import된 모든 자산을 변수로 다시 쓰기 때문에 컴파일된 코드를 서버에서만 실행하고 클라이언트용 웹 팩을 사용하여 번들을 구축하면 됩니다.

유일한 단점은 명명된 Import에서만 작동한다는 것입니다. 따라서 다음을 수행해야 합니다.

import styles from './styles.css';

잘 되게 하려고요.

웹 팩 설정에서 로더를 사용하고 있는지 확인합니다.

  module: {
     loaders: [
        { test: /\.jsx$/, exclude: /node_modules/, loader: "babel" },
        { test: /\.css$/, loader: "style!css" }
     ]
  }

웹 팩 중인 웹 팩 설정에 수 .babel-loader..js css 하는 ..cssfiles.complete files files files files files files files files.

이렇게 쓰면 안 요.importJavascript 가져오기 Javascript 가져오기require대대 、 유유유유유경 。

오리지널 투고

은 " " " 를 사용합니다.require하면 Babel을 사용할 수 .importES6(「Babel」Import」는 「Babel」Import」가 필요. »require수 없는 도 지정할 수 .imports. 따라서 CSS 파일을 로드하려면require대신import.

그 이유는 Babel은 ES6에서 제공되는 파일의 트랜스필러일 뿐이며 ES6에서는 CSS 파일을 Import할 수 없기 때문입니다.그래서 바벨도 허락하지 않을 거야

이 에러는 컴파일 단계가 아니라 실행 시 발생한다는 것을 알았습니다.이 앱은 ismorphic 앱이기 때문에 컴포넌트와 그 의존관계는 먼저 서버(노드 내)에서 해석됩니다.이것이 에러의 원인입니다.

제안해 주셔서 감사합니다.동형 어플리케이션에서 컴포넌트별 스타일시트를 가질 수 있는 방법을 알게 되면 더 많은 글을 올리도록 하겠습니다.

서버측 렌더링을 할 때도 같은 문제가 발생하였습니다.

그래서 postcss 플러그인 postcss-hash-classname을 씁니다.

css는 직접 필요하지 않습니다.

css classname js 파일이 필요합니다.

필요한 것은 js 파일뿐이므로 서버 측 렌더링을 정상적으로 수행할 수 있습니다.

또한 이 플러그인은 css 스코프 문제를 해결하기 위해 클래스 이름과 파일 경로를 사용하여 고유한 해시를 생성합니다.

해봐도 돼!

이것으로 해결...

https://github.com/michalkvasnicak/babel-plugin-css-modules-transform

$ npm install --save-dev babel-plugin-css-modules-transform

.babelrc에 플러그인 포함

{
    "plugins": ["css-modules-transform"]
}

그리고 CSS를 Import..어디서든 이렇게

const styles = require('./test.css');
OR
import css from './styles.css'

이것도 봐주세요...CSS 파일 이외의 파일 ....................................................................https://www.npmjs.com/package/babel-plugin-transform-assets

언급URL : https://stackoverflow.com/questions/30347722/importing-css-files-in-isomorphic-react-components