使用 Angular CLI 构建样式表
介绍
Angular CLI 是 Angular JavaScript 框架中非常强大的部分。通过在其构建系统前面公开一个简单而强大的 API，Angular CLI 使您能够快速轻松地将 CSS 样式表与应用捆绑在一起。在本指南中，您将了解如何在创建新应用时选择 CSS 预处理器以及如何利用上述 API。
让我们开始吧！
可选地选择 CSS 预处理器
可以使用 NPM 运行以下命令将 Angular CLI 下载到你的机器上：
npm install -g @angular/cli
您现在可以使用ng命令访问 CLI。要查看可用命令的完整列表，请运行ng -h。
首先，您需要创建一个新的 Angular 应用进行测试。通过 CLI 引导 Angular 应用非常简单，只需运行以下命令：
ng new testing-css
此命令将在当前目录中创建一个名为testing-css的新 Angular 应用。在创建新的 Angular 应用的过程中，系统将提示您要使用哪种 CSS 预处理器（如果有）。您的选项包括：
- CSS
- 南加州大学
- 萨斯
- 较少的
- 触控笔
此选择设置了 Angular 应用在样式表格式方面的初始状态。您随时可以通过编辑项目的angular.json文件来更改此状态。例如，为了确保使用.scss文件生成新组件，您可以添加或更改angular.json的这一部分：
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
包括外部样式表
上述功能很不错，但如果您需要干净安全地将外部样式表包含到生产构建中，该怎么办？Angular CLI 及其附带的构建系统也为您提供了帮助。通过适当配置angular.json文件，您可以告诉 Angular 在您的应用中构建任意数量的样式表。一个常见的例子是引入 Twitter Bootstrap。下面，您可以查看一个设置为包含 Bootstrap 的angular.json文件的示例。
"projects": {
"testing-css": {
....
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
....
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
]
....
通过修改项目的angular.json文件的样式数组字段，您可以轻松配置要在项目中包含的 CSS 文件。如果您要包含的样式表恰好是 SCSS 文件（或其他 CSS 预处理器），则无需修改 angular.json 文件，只需将所需的文件直接导入全局样式表即可。例如，如果您的应用使用 SCSS，则导入将如下所示：
@import "~bootstrap/scss/bootstrap.scss";
就您的构建而言，这将产生与上述方法相同的效果。
结论
在本指南中，您学习了如何使用 Angular CLI 构建样式。具体来说，您了解了如何在最初（在创建应用时）以及通过直接更改angular.json文件来设置样式表格式。最后，您学习了如何通过对angular.json进行更多配置将外部样式表纳入构建中。
就这样！现在，您可以放心地通过 Angular CLI 及其附带的构建系统构建和捆绑样式表。有关更多信息，请查看此文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
