web-dev-qa-db-ja.com

angle-cli sassおよび/またはブートストラップを追加する方法は？

私はangular-cliを試してみて、プロジェクトでsassとbootstrap=を取得しようとしています。 wiki 簡単にできること：

ng install sass

現在の最新版（beta.5）でこれを行うと、エラーが発生します。

Install failed. Could not find addon with name: sass

Angle-cliがインデックスページとsystemJSを処理する方法で、bootstrapおよび/またはsassをインストールするにはどうすればよいですか？

angularangular-cli
20
Thibs

[〜＃〜] note [〜＃〜]：この回答は、Angular CLIの変更により、期限切れです。以下のWootの回答を参照してください。より最新です。

node-sass経由でnpm i node-sass --save-devをインストールしてから、angular-cli.jsonのstyleExtをsassまたはscssに変更する必要があります（または、ng set defaults.styleExt scssで設定できます）

ブートストラップに関しては、publicディレクトリの下に配置し（styleという名前のサブディレクトリを使用）、index.html内で参照します。

PDATE：また、変数ファイルが必要な場合は、次のようにディレクトリをangular-cli-build.jsに追加できます...

return new Angular2App(defaults, {
  vendorNpmFiles: [
    ...
  ],
  sassCompiler: {
    includePaths: [
      'src/app/style' <-- directory for SASS reference files
    ]
  }
});
39
Brocco

Angle-cliを使用してプロジェクトを作成する場合、scssプリプロセッサーが付属します。スタイルファイルがある場合は、extをscssに変更するだけで、ng serveはそれらをコンパイルします。

CLIを使用してプロジェクトを作成すると、次の方法でscssを使用することを伝えることができます。

ng new sassy-project --style=sass

既存のプロジェクトがある場合Angular 2 to 5

ng set defaults.styleExt scss

プロジェクトがAngular 6および7の場合

ng config schematics.@schematics/angular:component.styleext sass

これらは、cssではなくscssスタイルで新しいコンポーネントを生成するときにcliに伝えます。コンパイラが既に存在するため、コンパイラを追加したり、コンパイラを有効にしたりしません。

既存のコンポーネントでは、スタイルファイルの拡張子を変更する必要があります。

追加のドキュメント https://angular.io/cli

お役に立てれば

62
Woot

angular-cli.jsonのこれらの行を

"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']に変更します。期待どおりに動作します。

6
All Іѕ Vаиітy

このスレッドを使用して、を見ることができますbootstrap= angle-cliプロジェクトに追加する方法

angular-cliプロジェクトにbootstrapを追加する方法

0
JLS

で作成した後

ng create "project"

プロジェクトディレクトリに移動して試してください

npm install sass

package.jsonが更新されます

0
pd farhad

Wootの回答に感謝します。この回答は、angular seedプロジェクトを使用した.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のダウンロードが必要です（または、ベースにscssサポートを含むbootstrap 4へのアップグレードが必要です。ノードモジュール）：

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が指摘したように、ファイルの自動作成時にcssファイルではなくscssファイルを作成するためのangular cli構成のアップグレードも実行する必要があります。

ng set defaults.styleExt scss

styles.cssファイルの名前をstyles.scssに変更する必要があります。

angular CLIとangularバージョンもこの執筆時点で少し古くなっているため（1.7.0および5.2.0）、この答えはそれらがアップグレードされたら変更しますしかし、現時点では、これは機能し、許可するために他に何もする必要はありません：

dotnet run

scssからcssへの自動コンパイルをサポートし、ng serveを介して内部でファイルを提供します。

0
James Eby