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

时间:2016-02-01 11:16:52

标签: sass webpack

我目前正在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实现吗?

1 个答案:

答案 0 :(得分:0)

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

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

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

的更多信息