如何让webpack捆绑我的css文件？

Question

目前我正在服务它：

<link rel="stylesheet" type="text/css" href="css.css">

这很好用，因为没有CSS闪烁。它在bundle.js之前加载。

如何告诉webpack将它放在bundle.js中，以便删除上面的行？

我可以直接在webpack的入口点导入它吗？

import F1Apex from './css.css';

还是需要特殊装载机？

这是好习惯吗？

这适用于Express / React应用程序。

Answer 1

您只需写下：

即可添加

import './css.css'

在您希望添加css的反应组件的顶部。

在webpack中，您可以在以下位置添加加载程序：

module:{
 loaders:[
 ...,
 {test: /(\.css)$/, loaders: ['style', 'css']},
 ]
}
npm install --save-dev css-loader

或另一种方法是在您的react组件中添加css 例如：

<h1 style ={{margin:'20 0 0 0',color:'red'}}>Hello</h1>

这对我有用。如果您有任何问题，请告诉我。