在webpack.config.js中定義css文件

Question

我正在構建一個靜態網站生成器，它使用webpack構建項目並創建一個包。

在這個項目中，用戶可以指定自定義的css文件。我希望這些CSS文件與最終結果捆綁在一起。問題是，我沒有通向開發期間可用的那些css文件的路徑，所以我不能在將被捆綁的javascript代碼中執行import 'some-asset-file-provided-by-the-user.css'。但撥打電話webpack.compile(config)後，我可以使用它們。

我正在尋找一種方法將這些CSS文件注入到包中。到目前爲止，我想盡各種辦法，如：

const stylesheet = 'some-asset-file-provided-by-the-user.css' 
require(stylesheet) 

，沒有工作，可能是因爲的WebPack不能處理這個「動態」的要求。然後，我用這個webpack define plugin爲此

/* webpack.config.js */ 
new webpack.DefinePlugin({ 
    stylesheet: 'some-asset-file-provided-by-the-user.css' 
}), 

/* app.js */ 
require(stylesheet) // should be replaced by the webpack define plugin with 'some-asset-file-provided-by-the-user.css' 

這也沒有工作。我也試圖找到一種方法，做這樣的事情：

{ 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract(Object.assign({ 
    fallback: 'style-loader', 
    use: [ 
     { 
     loader: 'css-loader', 
     options: { 
      useFiles: ['file-a.css', 'file-b.css'] 
     } 
     } 
    ] 
    }, extractTextPluginOptions)) 
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. 
}, 

這也失敗了，因爲顯然沒有風格，裝載機，也不CSS-Loader支持這種類型的交互。

我該如何解決這個問題？我願意爲此編寫插件，但我寧願使用現有的東西。

Answer 1

包含CSS的最簡單方法是將其添加到您的入口點。爲了更容易，你應該使用一個數組作爲入口點，即使它只是一個文件，所以你可以簡單地推送CSS。

例如：

entry: { 
    app: ['./src/index.js'], 
    // Other entries 
}, 

在你的編譯腳本，你將它傳遞給的WebPack之前將其添加到entry.app。

config.entry.app.push('./user.css'); 
const compiler = webpack(config);