Question

例如，如果我们有一个名为vendor.scss的供应商 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就会加载。

我们怎么做？

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

0 个答案: