Question

我目前正在webpack中使用css-loader，node-sass，sass-loader和style-loader包来编译我的sass文件，这是我的加载器当前的样子：

{
  test: /\.scss$/,
  loader: 'style!css!sass'
}

我想为我的样式使用这样的文件夹结构

styles
  components/
  main.sass

并且在main.sass中以某种方式我想从components文件夹中导入所有东西，所以像@import './components/**/*'这样的东西可以通过webpack实现吗？

Answer 1

您可以在Sass导入前加上＆＃39;〜＆＃39;告诉Sass loade r在导入时使用webpack＆＃39; require()解析。一旦webpack负责导入，您就会有一些灵活性。

如果您执行动态要求，例如require('~./components/' + someVar + '.scss')，webpack无法在构建时评估变量，它会捆绑该目录中的所有可能文件，并且require()的实际分辨率在运行时发生（这可能导致错误运行时，如果你已经要求提供不存在的东西）。如果能够满足您的需求（所有捆绑的文件），或者您仍然需要明确地require()每个部分，那么我不确定是否能够满足您的要求 - 但如果是这样的话，您可以轻松遍历目录中的所有文件并要求每个文件。

有关如何leverage webpack's dynamic requires and loading context.

的更多信息

webpack允许导入所有sass文件？即@import'components / ** / *'

1 个答案: