我目前正在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实现吗?
答案 0 :(得分:0)
您可以在Sass导入前加上'〜'告诉Sass loade r在导入时使用webpack' require()
解析。一旦webpack负责导入,您就会有一些灵活性。
如果您执行动态要求,例如require('~./components/' + someVar + '.scss')
,webpack无法在构建时评估变量,它会捆绑该目录中的所有可能文件,并且require()
的实际分辨率在运行时发生(这可能导致错误运行时,如果你已经要求提供不存在的东西)。如果能够满足您的需求(所有捆绑的文件),或者您仍然需要明确地require()
每个部分,那么我不确定是否能够满足您的要求 - 但如果是这样的话,您可以轻松遍历目录中的所有文件并要求每个文件。
有关如何leverage webpack's dynamic requires and loading context.
的更多信息