在 webpack.config.js 中定义 css 文件答案

【问题标题】：Define css files within webpack.config.js在 webpack.config.js 中定义 css 文件
【发布时间】：2017-09-19 09:01:22
【问题描述】：

我正在构建类似于静态网站生成器的东西，它使用 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 定义插件

/* 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 显然都不支持这种类型的交互。

我该如何解决这个问题？我愿意为此编写一个插件，但我宁愿使用现有的东西。

【问题讨论】：

标签： javascript css webpack webpack-2 webpack-style-loader

【解决方案1】：

包含 CSS 的最简单方法是将其添加到您的入口点。为简化此操作，您应该使用数组作为入口点，即使它只是一个文件，这样您就可以简单地推送 CSS。

例如：

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

在您的编译脚本中，您将其添加到entry.app，然后再将其传递给 webpack。

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

【讨论】：