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

你可以从＆＃34; /node_modules/highlight.js/styles/tomorrow.css"中删除明天的css文件。在您的meteor客户端文件夹中，它将自动添加到您的项目中。

或者

在您的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

你的开发环境是什么？吞掉？的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"
  }

您需要安装style-loader，css-load和处理此类文件的任何其他加载器。因此对于webpack，它将通过依赖树自动解析所有这些依赖关系，将所有内容翻译并打包到一个js文件中。

反应+反应突出显示。代码突出显示

2 个答案: