Webpack hot dev server «не может найти модуль»

Question

человек. В настоящее время я изучаю React на Egghead.io, и я нахожу проблему с импортом файла css в js. Это мой код в js-файле, который импортирует css. В настоящее время style.css находится в том же каталоге. Я не знаю Webpack достаточно хорошо, чтобы понять, как это исправить.

import React from 'react'; 
import "style.css"; 
class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     input: '/* add your jsx here */', 
     output: '', 
     err: '' 
    } 
    } 
    update(e) { 
    let code = e.target.value; 
    try{ 
     this.setState({ 
     output: window.Babel 
       .transform(code, {presets: ['es2015', 'react']}) 
       .code, 
     err: '' 
     }) 
    } 
    catch(err) { 
     this.setState({err: err.message}) 
    } 
    } 
    render() { 
    return (
     <div> 
     <header>{this.state.err}</header> 
     <div className="container"> 
      <textarea onChange={this.update.bind(this)} 
        defaultValue={this.state.input}/> 
      <pre> 
      {this.state.output} 
      </pre> 
     </div> 
     </div> 
    ) 
    } 
} 

export default App 

Текст ошибки: Не удалось скомпилировать.

Ошибка в ./src/App.js модуле не найден: 'style.css' в C: \ Интерфейсный \ проекты \ Реагировать \ Reactapp \ ЦСИ

@ ./src/App.js 14 : 0-20

Answer 1

вы импортировали файл, как этого

import "style.css" 

Это говорит Webpack искать модуль с именем style.css, точно так же, как она выглядит для React модуля импортируемой линии выше

Чтобы импортировать correcly ваши стили, всегда использовать относительный путь импорта место, которое является следующим

import "./style.css"