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

/* 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`.
},

這也失敗了，因為顯然style-loader和css-loader都不支持這種類型的交互。

我該如何解決？ 我願意為此編寫插件，但我想使用現有的插件。

Answer 1

包含CSS的最簡單方法是將其添加到您的入口點。 為了簡化操作，即使只是單個文件，也應該使用數組作為入口點，因此您可以簡單地推送CSS。

例如：

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

在編譯腳本中，將其添加到entry.app然后再傳遞給webpack。

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