React не может импортировать файл CSS и выдает ошибку

Question

Я новичок в React и gulp и пытаюсь создать пример проекта. Мне удалось включить задачу React для gulp, чтобы преобразовать мой файл вступления в реакцию (App.js), но проблема в том, что всякий раз, когда я вставляю правило в мой файл CSS, который импортируется в мой App.js, я получаю ошибку, пока все работает нормально когда файл css пуст!!!

Вот код

Файл реакции:

import React, { Component } from 'react';
import Header from './header'
import Footer from './footer'
import Homepage from './homepage'
import style from './css/main.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header/>
        <Homepage />
        <Footer/>
      </div>
    );
  }
}
export default App;

и это мой файл глотка:

const browserify    = require('browserify');
const babelify      = require('babelify');
const source        = require('vinyl-source-stream');
const babel         = require('gulp-babel');
const sourcemaps    = require('gulp-sourcemaps');
const reactify      = require('reactify');

gulp.task('react' , function(){
  return browserify({
            entries: ['./src/App.js'],
        })
        .transform(babelify , {presets: ["es2015", "react"]})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./src/js'));
});

Answer 1

Тебе нужно browserify-css скомпилировать CSS файлы.

npm i -D browserify-css

затем добавьте код преобразования в файл gulp.

transform: [
  ['babelify', {
      "presets": ['es2015', 'react']
    }
  ],
  ['browserify-css']
]

Answer 2

Просто замените код импорта CSS следующим

import style from './css/main.css'

в

import './css/main.css'

Answer 3

Не работает

Когда файл CSS пуст, у меня нет ошибки, но как только я пишу правило, я получаю эту ошибку

events.is:183 бросить ошибку; // необработанное событие error

Синтаксическая ошибка: непредвиденное событие "ошибка"