我正在尝试 angular-cli 并尝试在项目中获得 sass 和 bootstrap。我在wiki中读到你可以简单地做:
ng install sass
使用当前最新版本(beta.5)执行此操作会给我一个错误:
Install failed. Could not find addon with name: sass
如何以 angular-cli 处理索引页面和 systemJS 的方式安装 bootstrap 和/或 sass?
我正在尝试 angular-cli 并尝试在项目中获得 sass 和 bootstrap。我在wiki中读到你可以简单地做:
ng install sass
使用当前最新版本(beta.5)执行此操作会给我一个错误:
Install failed. Could not find addon with name: sass
如何以 angular-cli 处理索引页面和 systemJS 的方式安装 bootstrap 和/或 sass?
如果您使用 angular-cli 创建项目,它会附带一个 scss 预处理器。如果您有样式文件,您只需将 ext 更改为 scss,ng serve 将为您编译它们。
当您使用 cli 创建项目时,您可以通过以下方式告诉它您要使用 scss
ng new sassy-project --style=sass
如果你有一个现有的项目 Angular 2 到 5
ng set defaults.styleExt scss
如果您的项目是 Angular 6 和 7
ng config schematics.@schematics/angular:component.styleext sass
这些告诉 cli,当您生成具有 scss 样式而不是 css 的新组件时。它不会添加编译器或启用编译器,因为那里已经有一个。
任何现有组件都需要重命名其样式文件扩展名。
希望这可以帮助
注意:由于 Angular CLI 的更改,此答案已过时,请参阅以下来自 Woot 的最新答案。
您需要通过安装node-sass
,npm i node-sass --save-dev
然后将您的 styleExt 更改angular-cli.json
为sass
or scss
(或者您可以通过ng set defaults.styleExt scss
至于引导程序,将其放在public
目录下(我使用名为 的子目录style
)并在其中引用它index.html
更新:
此外,如果您想拥有变量文件,您可以将目录添加到angular-cli-build.js
这样的...
return new Angular2App(defaults, {
vendorNpmFiles: [
...
],
sassCompiler: {
includePaths: [
'src/app/style' <-- directory for SASS reference files
]
}
});
更改这些行angular-cli.json
from
"apps": [
{
"styles": [
"styles.css"
]
}
]
至
"apps": [
{
"styles": [
"styles.sass"
]
}
]
设置 styleExt 后
ng set defaults.styleExt scss
然后更改src/style.css
为src/style.sass
和['app.component.css']
。['app.component.sass']
它将按预期工作。
创建后
ng create "project"
转到项目目录并尝试
npm install sass
它会更新你的 package.json
感谢 Woot 的回答,对于使用 angular 种子项目的 .NET Core 2.0/2.1 开发人员来说,这个答案更适用于:
#get lastest SPA templates and make sure angular CLI is global
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::*
npm install -g @angular/cli
#create a new project, default for target framework doesn't seem to be working when .NET Core 2.1 SDK is Installed
dotnet new angular -f netcoreapp2.0 -o test-web-app
这个种子项目仍然使用 bootstrap 3 版本,因此它需要下载 bootstrap-sass(或升级到 bootstrap 4,其中包括基本节点模块中的 scss 支持):
npm install bootstrap-sass --save-dev
在 .angular-cli.json 文件中更改样式配置:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
至:
"styles": [
"styles.scss",
"../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
]
正如 Woot 指出的那样,在自动创建文件时升级 angular cli 配置以创建 scss 文件而不是 css 文件也应该通过以下方式执行:
ng set defaults.styleExt scss
并且需要将您的styles.css文件重命名为styles.scss。
在撰写本文时,角度 CLI 和角度版本也略微过时(1.7.0 和 5.2.0),因此一旦升级,此答案可能会发生变化。但截至目前,这是可行的,不需要做任何其他事情来允许:
dotnet run
支持将 scss 自动编译为 css 并通过ng serve在后台提供文件。