Réagir + Réagir en surbrillance. Mise en surbrillance du code

Question

Im utilisant rea avec meteor et la surbrillance de réaction. Le problème est mon code n'est pas mis en évidence et im obtenir cette erreur sur la console

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

Qu'est-ce que cela signifie et que dois-je faire à ce sujet.?

Answer 1

Vous pouvez simplement déposer le fichier css tomorrow.css de "/node_modules/highlight.js/styles/tomorrow.css" dans votre dossier client meteor il sera automatiquement ajouté à votre projet.

Ou

Sur votre fichier JSX vous pouvez l'importer comme ci-dessous:

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

Quel est l'environnement de développement de la vôtre? Gorgée? Webpack? Il semble que vous n'avez pas un gestionnaire correct pour les fichiers CSS sur React? Réagir ne gère pas magiquement les fichiers CSS.

Dans le webpack, vous devez disposer d'un chargeur gérant les fichiers css, sass et style. comme,

// 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" 
 
    }

Vous aurez besoin d'installer le style chargeur, css-charge et toutes les autres chargeurs qui gère ce type de fichier. Ainsi, pour webpack, il analysera automatiquement toutes ces dépendances à travers l'arbre de dépendance, traduira et emballera tout dans un fichier js.