Question

我的目标是拥有动态需求而不会将所有依赖项捆绑在同一级别，因为我可能在某个时候拥有50个品牌。

我的结构就是这个：

-src/app
-theming
--default
--brand_1

以下是Angular组件的示例：

import { Component } from '@angular/core';

const brand = 'brand_1';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [`../../theming/${brand}/style.scss`]
})
export class AppComponent {
  title = 'app';
}

问题是需要创建一个包含所有兄弟文件夹的地图并获取其内容。

`webpack:///C:/Users/JeanB/work_projects/playground/angular-advanced-branding/theming ^\.\/.*\/style\.scss$`
…
var map = {
  "./brand_1/style.scss": "../../../../../theming/brand_1/style.scss",
  "./default/style.scss": "../../../../../theming/default/style.scss"
};

如您所见，我的变量被解释为通配符，正如webpack documentation所期望的那样。

你知道如何防止这种情况发生吗？我看到两个出路，一个是用systemJS，它支持动态需求更好。另一个更具实验性，在webpack中使用require的context选项。

感谢任何帮助！

- 更新

经过一天的研究，我发现Angular不支持插值的urlStyles值。

Webpack正在做的事情应该是webpack提供给它的，这就是require（'blabla'+ variable +'。scss'）。

SystemJs没有相同的行为，但它现在已超出范围。我有解决方案时会更新票证。

动态需要webpack和Angular

0 个答案: