React cannot import CSS file, and throws an error

Question

I'm new to React and gulp and I'm trying to build a sample project. I managed to include a React task for gulp, to convert my react entry file (App.js), but the problem is that whenever I insert a rule in my CSS file which is imported in my App.js, I get an error, while everything works fine when the css file is empty!!!

Here's the code

React File:

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;

and this is my gulp file:

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

Nishant Dixit · Accepted Answer · 2018-03-19 12:27:03Z

3

Just replace css import code with this

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

to

import './css/main.css'

answered Mar 19, 2018 at 12:27

Nishant Dixit

5,5125 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikramaditya · Accepted Answer · 2018-03-19 12:34:42Z

3

You need browserify-css to compile css files.

npm i -D browserify-css

then add transform code to your gulp file.

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

answered Mar 19, 2018 at 12:34

Vikramaditya

5,5947 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

React cannot import CSS file, and throws an error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related