对于每个组件：
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>;
}
}
每种解决方案的优缺点是什么？我想听听更多建议并感谢您的帮助.
解决方法
如果导入位于根组件中,则可能会删除使用fa fa-bandcamp类的所有组件,但导入仍保留在根目录中(因为您忘记了它而不是组件旁边)并且您将在CSS中捆绑即使在使用它的块中也是如此.
相反,当在组件级别导入时,您最终可能会遇到使用这些类并忘记导入该font.css的情况,因为另一个组件已经导入了全局CSS.看起来它可以工作但是如果你编码拆分你可能会发现你的块没有正确的字体,因为CSS导入在另一个块中.在这种情况下,在根目录中导入它将解决您的问题！
我会怎么做：
我认为任何全局css都是坏的,你应该使用像CSS modules这样的东西.所以我更进一步,创建一个< Text />组件类似于：
import React from 'react'
import '../font.css'
export default ({ className,children,tagName: TagName }) => <TagName className={`fa fa-bandcamp ${className}`>{ children }</TagName>;
现在你可以使用< Text tagName =“span”>嘿！< / Text>在所有组件中安全,因为：
>您不再需要一直导入CSS.
>如果您编码拆分,或删除所有< Text />您将不会留下包含您忘记的根中未使用的CSS导入的包.
>不可能使用这些类而忘记导入CSS.
>一切都很好,并以模块化方式封装,您的捆绑包尽可能高效.
我不会将这种策略用于像reset.css这样的东西.明显.
TL; DR摘要
根级别 – 潜在的低效代码拆分.难以维护,因为CSS不会与使用它的组件并存.
单个组件级别 – 始终导入的痛苦.脆弱,因为如果忘记导入全局CSS,最终可能会使用块中不存在的类.
“文本”组件 – 太棒了.只要确保每个人都通过这个组件使用fa类,一切都是金色的.模块化.易于维护.强大的.
