如何加载Ecmascript中的css文件6

这里我想加载.css文件到我的Js文件中。这里是我的.js文件。如何加载Ecmascript中的css文件6

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

我想加载MyCss文件，并在我的文本框这是目前的渲染（）方法中使用的CSS类。

来源

2017-09-06 Murali

我认为类应该是类名 –

如果你使用的WebPack作为buildtool看这里：https://javascriptplayground.com/blog/2016/ 07/css-modules-webpack-react/ –

@ mr.void我可以将css文件导入到webpack文件 – Murali

你需要一个捆绑工具来做到这一点像webpack2。
您将使用css-loader来开始加载它。
使用require('file.css');来简单地包括它们。
有很多ES6样板可以满足您的需求。

来源

2017-09-06 09:27:16

如果你想推广css文件，你需要像的WebPack或大口的包捆绑，然后用装载机处理CSS文件，如css-loader，less-loader等;在反应过来，你还可以在JSX文件内嵌样式，如：

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

来源

2017-09-06 10:59:12 Alvin

如何加载Ecmascript中的css文件6

回答

相关问题