我如何讓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的react組件的頂部。

在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>

這對我有用。 如果您有任何問題，請告訴我。