对于每个组件:
import React from 'react'
import '../font.css'
class MyComponent extends React.Component {
render() {
return <div className="fa fa-bandcamp"></div>;
}
}
这很容易理解:因为我想使用“fa fa-bandcamp”,所以我导入“../font.css”。
这种方法与编写JS或任何其他编程语言类似,如果需要依赖项,我们也会在文件中导入它,例如:
import global from 'global'
import util from 'util'
global.foo
global.bar
util.bar
util.bar
// ...
然而,我的同事告诉我全局 CSS 不应该在每个依赖组件中导入,而应该在根组件或 webpack 的入口文件中导入。例如:
// in each component
import React from 'react'
// import '../font.css'
class MyComponent extends React.Component {
render() {
return <div className="fa fa-bandcamp"></div>;
}
}
// in entry file (root component)
import React from 'react'
import '../font.css'
class App extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
每种解决方案的优缺点是什么?我想听听更多建议,感谢您的帮助。