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

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 目录中查找该模块。这是因为它不存在，你得到

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

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

Unable to import css in ReactJs application

html

javascript

css

reactjs

create-react-app