webpack.config.js内にCSSファイルを定義する

Question

webpackを使ってプロジェクトをビルドし、バンドルを作成する静的Webサイトジェネレータのようなものを構築しています。

このプロジェクトでは、ユーザーはカスタムCSSファイルを指定できます。私はそれらのCSSファイルを最終結果と一緒にバンドルしたい。問題は、開発中にこれらのCSSファイルへのパスがないため、バンドルされるjavascriptコードにimport 'some-asset-file-provided-by-the-user.css'はできません。しかし、私はwebpack.compile(config)に電話するときに利用可能です。

私はこれらのcssファイルをバンドルに挿入する方法を探しています。これまでのところ、私はさまざまな方法を試しました。例えば：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`. 
}, 

明らかにどちらのスタイルローダやCSS-ローダーは、この種の相互作用をサポートするためにも失敗した：私はまた、このような何かをする方法を見つけることを試みました。

どうすればこの問題を解決できますか？私はこのためのプラグインを書くことにオープンしていますが、私はむしろ既存のものを使用したいと思います。

Answer 1

CSSを含める最も簡単な方法は、エントリポイントに追加することです。これを簡単にするには、配列が1つのファイルであってもエントリポイントとして使用する必要があります。そのため、単純にCSSをプッシュできます。例えば

：あなたはWebPACKのに渡す前にentry.appにそれを追加するには、コンパイルスクリプトで

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

。