Question

我正在尝试将html模板转换为ReactJs应用程序。

一切正常

<link rel="stylesheet" href="%PUBLIC_URL%/css/styles-merged.css">

在public\index.html文件中，但是当我将style.min.css文件从public\css folder移到src\index.js时，它不起作用。我确定我犯了一个新手错误。我究竟做错了什么？

文件结构

public
   index.html
src
   index.js
   app.js 
   css
      style.min.css
   fonts
      glyphicons-halflings-regular.eot

错误：

./src/index.js Module not found: Can't resolve 'css/style.min.css' in 'c:\projects\sample\src'

public \ index.html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <!--<link rel="stylesheet" href="%PUBLIC_URL%/css/styles-merged.css">-->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  </head>  
  <body>
    <div id="root"></div>
  </body>
</html>

src \ index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import 'css/style.min.css';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

import './css/style.min.css'

您必须在相对目录（位于src内）中为要导入的模块提供相对路径

这样做的时候

import 'css/style.min.css'

它将尝试在node_modules目录中查找该模块。这是因为它不存在，您将获得

未找到模块：无法在'c：\ projects \ sample \ src'中解析'css / style.min.css'

无法在ReactJs应用程序中导入CSS

1 个答案: