React 无法导入 CSS 文件，并抛出错误答案

【问题标题】：React cannot import CSS file, and throws an errorReact 无法导入 CSS 文件，并抛出错误
【发布时间】：2018-03-19 12:22:33
【问题描述】：

我是 React 和 gulp 的新手，我正在尝试构建一个示例项目。我设法为 gulp 包含了一个 React 任务，以转换我的反应条目文件（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;

这是我的 gulp 文件：

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'));
});

【问题讨论】：

标签： css reactjs gulp browserify babelify

【解决方案1】：

你需要browserify-css来编译css文件。

npm i -D browserify-css

然后将转换代码添加到您的 gulp 文件中。

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

【讨论】：

【解决方案2】：

只需用这个替换css导入代码

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

到

import './css/main.css'

【讨论】：