反応+反応ハイライト。コードを強調表示

Question

私は流星と反応し、反応ハイライトを使用しています。問題は、私のコードがハイライトされていないとイムは、それが何を意味し、私はそれについて何をすべき

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/singlearticle/node_modules/highlight.js/styles/tomorrow.css".

コンソールにこのエラーを取得していますか。？

Answer 1

流星のクライアントフォルダにある "/node_modules/highlight.js/styles/tomorrow.css"からcssファイルtomorrow.cssをドロップすると、プロジェクトに自動的に追加されます。あなたは以下のようにそれをインポートすることができ、あなたのJSXファイルで

それとも

：

import React, { Component } from 'react'; 
import Highlight from 'react-highlight'; 
import "../node_modules/highlight.js/styles/tomorrow.css"; 

export default class App extends Component { 

    render() { 
     return (
      <div className="container"> 
       <header> 
        <h1>Example</h1> 
       </header> 
       <Highlight className='js'>{"var test = 'hello'"}</Highlight> 
      </div> 
     ); 

    } 
} 

Answer 2

あなたのdevの環境は何ですか？ギャルプ？ Webpack？あなたはReactでCSSファイルの正しいハンドラを持っていないようですね？ Reactはcssファイルを魔法のように処理しません。

webpackでは、CSS、Sass、スタイルファイルを処理するローダが必要です。 のような、

// css loader 
 
    { 
 
    test: /\.css$/, 
 
    loader: "style-loader!css-loader!postcss-loader" 
 
    }, 
 

 
    // font file loaders 
 
    { 
 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
    loader: "url-loader?limit=10000&minetype=application/font-woff" 
 
    }, 
 

 
    { 
 
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
 
    loader: "file-loader" 
 
    }

あなたはスタイル・ローダー、CSS-負荷とこの種類のファイルを扱う他のローダーをインストールする必要があります

。したがって、webpackの場合、依存ツリーを介してこれらの種類の依存関係を自動的に解析し、すべてを1つのjsファイルに変換してパッケージ化します。