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