我们如何使用 webpack 有条件地加载供应商 css？

Question

例如，如果我们有一个以以下内容命名的供应商scss 文件vendor.scss：

$color: green;

h1 {
  background-color: $color;
}

我们如何编写规则来实现以下结果？（或类似）

let vendor = true; // this will be configured outside

if (vendor) {
  let style = require('style-loader/useable!css-loader!./vendor.scss');
  style.use(); //loads just if I call `use`, otherwise not
}

require('my-other-file.scss'); // loads normally, without `use`.

因为vendor.scss是供应商 scss/css 我们不能或不应将其重命名为，例如，vendor.useable.scss. 并且出于维护目的，我们不希望创建一个my-vendor-wrapper.scss可以将其包裹在@import内部的新工具。

在 webpack 中，现在，我有这个规则：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  // test: /\.(scss|sass|css)$/i,
  test: /^(?!.*style-loader\/useable!).*\.(sass|scss|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'postcss-loader', 'sass-loader']
  })
}

我尝试了几件事，比如创建额外的规则。如果我使用像 lscss（用于惰性 scss）这样的自定义扩展，我可以让它工作。但是我想要的预期行为是正常加载所有 css/scss 但如果它style-loader/useable!前面有它，如果我调用use.

我们应该怎么做？