How to load css file in Ecmascript 6

Question

Here I want to load .css file into my Js file.Here is my .js file.

import React from 'react';
import { connect } from 'react-redux';
import cssContent from './MyCss';//Here I want to load that css file.

class Home extends React.Component {
    constructor() {
        super();
        this.state = {

        }
        console.log("Constructor called");
        this.variables = ["name1", "name2"]
    }

 render() {
        const todos = this.props.componentTodos.map((todo) => <div key={todo.id}><p>{todo.name}</p><p>{todo.completed}</p></div>)  
        return (<div>
            {this.variables}
            <h1>This is home</h1>
            <input type="text" name="name" class="applycss" value={this.state.name} onChange={this.setData} />
            <button onClick={this.logData}>Add Todo</button>


            {todos}
        </div>);
    }
export default connect(,)(Home);

I want to load that MyCss file and use those css classes in my text box which is present inside the render() method.

if you use webpack as buildtool look here: https://javascriptplayground.com/blog/2016/07/css-modules-webpack-react/ — enno.void, Sep 06 '17 at 09:24
You just need to import the file. So you can just do `import './Mycss';` — zik, Sep 06 '17 at 09:36

score 0 · Answer 1 · edited Sep 06 '17 at 09:28

0

you need a bundle tool to do that Like webpack2 .
you will use css-loader to start loading it .
use require('file.css'); to simply include them .
there are a lot of ES6 boilerplates to do just that for you .

edited Sep 06 '17 at 09:28

Paolo Forgia

6,572
8
46
58

answered Sep 06 '17 at 09:27

andrew s zachary

167
2
14

score 0 · Answer 2 · answered Sep 06 '17 at 10:59

If you want to Outreach css files, you'll need the package bundler like webpack or gulp, and then use the loader to deal with css file, such as css-loader, less-loader etc; in react, you can also inline style in the jsx file ,such as:

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

How to load css file in Ecmascript 6

2 Answers2