Angular 示意图。自定义 angular.json 文件

Question

当我使用原理图(ng new --collection=@foo/schematics myproject)构建我的站点时，一切正常，除了一件事:

生成的 angular.json 文件在样式数组中只包含一个样式文件，我需要它包含多个自定义样式文件:

ng 新原理图构建后的当前 angular.json:

"build": {
  "options": {
    "styles: [
      "src/styles.scss"
    ]
  }
}

期望:

"build": {
  "options": {
    "styles: [
      "src/styles.scss",
      "src/custom1.scss",
      "src/custom2.scss"
    ]
  }
}

我如何告诉 angular 原理图例程我想要包含这些额外的样式表？

Answer 1

我不确定这是否是最佳实践，但我最近也不得不弄清楚这一点......这就是我所做的......

function updateAngularJson(options: any): Rule {
	return (host: Tree, context: SchematicContext) => {
		updateAngularJsonOptions(host, options);
		return host;
	}
}

function updateAngularJsonOptions(host, options) {
	var projectDir = (options.directory || options.name) + '/';
	var configPath = projectDir + 'angular.json';
	var workspace = getWorkspace(host, projectDirectory);

	if (host.exists(configPath)) {
		var currentAngularJson = host.read(configPath)!.toString('utf-8');
		var json = JSON.parse(currentAngularJson);
		var optionsJson = json['projects'][options.name]['architect']['build']['options'];
		optionsJson['assets'].push("src/custom1.scss");
		optionsJson['assets'].push("src/custom2.scss");
		json['projects'][options.name]['architect']['build']['options'] = optionsJson;
		host.overwrite(configPath, JSON.stringify(json, null, 2));
	} else {
		throw new SchematicsException('angular.json not found at ' + configPath);
	}
	return host;
}

仔细检查上面的代码 - 由于某些原因，我无法复制/粘贴我的工作解决方案，所以我输入了这个是为了尝试提供帮助......希望你从上面得到了想法......非常适合我...