web-dev-qa-db-ja.com

Angular CLI SASSのオプション

私はAngularが初めてで、Emberコミュニティの出身です。 Ember-CLIをベースにした新しいAngular-CLIを使用しようとしています。

新しいAngularプロジェクトでSASSを処理するための最良の方法を知る必要があります。 Angular-CLIのコアコンポーネントの多くはEmber-CLIモジュールから実行されるため、 ember-cli-sass repoを使用してうまく動作するかどうかを確認しました。

それはうまくいきませんでしたが、私が何かを誤って設定したかどうかは、またしてもわかりません。

また、新しいAngularプロジェクトでスタイルを整理するための最善の方法は何ですか？ sassファイルをコンポーネントと同じフォルダに置くのがいいでしょう。

angularsassangular-cli
298
JDillon522

角度クリを使ってプロジェクトを作成するときは、次のことを試してください。

ng new My_New_Project --style=sass

これにより、定義済みのsassファイルを使用してすべてのコンポーネントが生成されます。

Scssシンタックスが必要な場合は、次のようにプロジェクトを作成してください。

ng new My_New_Project --style=scss

プロジェクト内の既存のスタイルを変更している場合

ng set defaults.styleExt scss

Cliが残りを処理します。

最新バージョン

CLIを使用して既存のプロジェクトに新しいスタイルを設定するAngular 6の場合：

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

または直接angle.jsonに：

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}
507
Mertcan Diken

Angular 6+用に更新

  1. 新しいプロジェクト

    Angular CLIを使用して新しいプロジェクトを生成する場合 /、CSSプリプロセッサを次のように指定します。

    • SCSS構文を使用する 

      ng new sassy-project --style=scss

    • SASS構文を使う 

      ng new sassy-project --style=sass

  2. 既存プロジェクトの更新

    既存のプロジェクトのデフォルトスタイルを に設定する を実行して

    • SCSS構文を使用する 

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

    • SASS構文を使う 

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

    上記のコマンドは、ワークスペースファイル（angular.json）を次のように更新します。

    "schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
}

    ここでstyleextは、選択に応じてscssまたはsassのいずれかになります。



オリジナルの回答 （Angular <6の場合）

新しいプロジェクト

新しいプロジェクトのために私達は希望するフレーバーSASS/SCSSに従ってオプション--style=sassまたは--style=scssを設定することができます

  • SASS構文を使う 

    ng new project --style=sass

  • SCSS構文を使用する 

    ng new project --style=scss

それからnode-sassをインストールしてください。

npm install node-sass --save-dev

既存プロジェクトの更新

angular-cliを作成してsassファイルをnode-sassでコンパイルするには、実行する必要がありました。

npm install node-sass --save-dev

これはnode-sassをインストールします。それから

  • SASS構文の場合 

    ng set defaults.styleExt sass

  • SCSS構文の場合 

    ng set defaults.styleExt scss

デフォルトのstyleExtをsassに設定します。

（または）

.angular-cli.json内の目的の構文について、styleExtをsassまたはscssに変更します。

  • SASS構文の場合 

    "defaults": {
     "styleExt": "sass",
}

  • SCSS構文の場合 

    "defaults": {
     "styleExt": "scss",
}

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles

これは.angular-cli.jsonの行を変更することで修正されました、

"styles": [
        "styles.css"
      ],

どちらにも

  • SASS構文の場合 

    "styles": [
        "styles.sass"
      ],

  • SCSS構文の場合 

    "styles": [
        "styles.scss"
      ],
325
All Іѕ Vаиітy

当局からの引用githubリポジトリ -

使用するには、例えばインストールするだけです。

npm install node-sass

プロジェクト内の.cssファイルの名前を.scssまたは.sassに変更します。それらは自動的にコンパイルされます。 Angular2Appのoptions引数には、それぞれのCSSプリプロセッサに直接渡されるsassCompiler、lessCompiler、stylusCompiler、compassCompilerの各オプションがあります。

こちらをご覧ください

36
regnar

デフォルトで常にscssを使用するようにangular-cliに指示します

プロジェクトを生成するたびに--style scssを渡さないようにするには、次のコマンドを使用して、angle-cliのデフォルト設定をグローバルに調整します。

ng set --global defaults.styleExt scss


Angular-Cliの一部のバージョンには、上記のグローバルフラグの読み取りに関するバグが含まれています（ link を参照）。あなたのバージョンにこのバグが含まれている場合は、次のようにプロジェクトを生成してください。

ng new some_project_name --style=scss
25
Michael P. Bazos

Mertcanが言ったように、scssを使う最も良い方法はそのオプションでプロジェクトを作成することです：

ng new My_New_Project --style=scss

Angular-cliには、プロジェクトを作成した後で次のコマンドを使用してデフォルトのCSSプリプロセッサを変更するオプションも追加されています。

ng set defaults.styleExt scss

より多くの情報のためにあなたは彼らのドキュメンテーションのためにここで見ることができます：

https://github.com/angular/angular-cli

21
Jared Wadsworth

Scssファイルに移動するのは非常に厄介なことに気づきました!!! styleUrls: ['app.component.scss']のstyleUrls: ['./app.component.scss']から./に移動する必要があります（app.component.tsを追加）

新しいプロジェクトを生成するときにどのngを実行しますが、デフォルトのプロジェクトを作成するときはそうではないようです。 ngビルド中にエラーを解決する場合は、この問題を確認してください。わずか1時間で完了しました。

16
JoelParke

ベストはng new myApp --style=scssかもしれません

その後、 Angular CLI を指定すると、 scss を使用して新しいコンポーネントが作成されます。

scssを使うことはあなたがおそらく知っているようにブラウザでは動かないことに注意してください。それで我々はそれをcssにコンパイルするために何かが必要です、この理由で我々はnode-sassを使うことができます。

npm install node-sass --save-dev

そして、あなたは行ってもいいはずです！

あなたがウェブパックを使用しているならば、ここで読んでください：

既存のpackage.jsonがあるプロジェクトフォルダ内のコマンドライン：npm install node-sass sass-loader raw-loader --save-dev

webpack.common.jsで、「rules：」を検索し、このオブジェクトをrules配列の末尾に追加します（前のオブジェクトの末尾にコンマを追加することを忘れないでください）。

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

それからあなたのコンポーネントで：

@Component({
  styleUrls: ['./filename.scss'],
})

あなたがグローバルなCSSサポートを望むなら、トップレベルのコンポーネント（おそらくapp.component.ts）でカプセル化を取り除き、SCSSを含めてください：

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

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

Angularスターター here から。

5
Alireza

ng set --global defaults.styleExt=scssはng6以降廃止予定です。このメッセージが表示されます。

get/setはconfigコマンドを支持して非推奨になりました

あなたが使用する必要があります：

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

特定のプロジェクトをターゲットにしたい場合は（{project}を自分のプロジェクトの名前に置き換えます）

ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'
4
aloisdg

Angular-CLIが推奨される方法であり、Angular 2+コミュニティの標準です。

SCSSで新しいプロジェクトを作成

ng new My-New-Project --style=sass

既存のプロジェクトを変換する（CLIがv6未満）

ng set defaults.styleExt scss

（この方法ではすべての.cssファイルを手動で名前変更する必要があります。コンポーネントファイルで名前を変更することを忘れないでください）


既存のプロジェクトを変換する（CLIがv6以上）

  1. すべてのCSSファイルをSCSSに名前変更し、それらを参照するコンポーネントを更新します。
  2. angular.jsonの「schematics」キーに次の行を追加します（通常は11行目）。

"@schematics/angular:component": { "styleext": "sass" }

3
Edodso2

以下は角度のあるCLI 6プロジェクトで動作するはずです。あなたが取得している場合はI.e：

get/setはconfigコマンドのために廃止予定です。

npm install node-sass --save-dev

それから（ プロジェクト名を変更してください ）

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

デフォルトのプロジェクト名を取得するには、次のようにします。

ng config defaultProject

しかしながら： あなたがあなたのプロジェクトを<6から角度6に移行したならば、設定がそこに存在しない可能性が高いです。その場合あなたは得るかもしれません：

無効なJSON文字：0：0の "s"

そのため、手動でangular.jsonを編集する必要があります。

これを次のようにします（styleexプロパティに注意してください）。

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

私には非常に複雑なスキーマのように思えます。 ¯_（ツ）_ /¯

これで、すべてのcss/lessファイルをscssに変更したり、コンポーネント内の参照を更新したりする必要がありますが、行ってもいいはずです。

2
Neil Watson

3/10/2019現在、Anguarはsassのサポートをやめました。 --styleを実行するときにng newにどんなオプションを渡したかについては特に問題はありません。常に.scssファイルが生成されます。何の説明もなくサポートが中止されたのは残念です。

1
Ogrish Man

グローバルデフォルトとして設定

ng set defaults.styleExt=scss --global

1
Sajith Mantharath

CSSプリプロセッサ統合Angular CLIはすべての主要CSSプリプロセッサをサポートします。

これらのプリプロセッサを使用するには、単にファイルをコンポーネントのstyleUrlsに追加します。

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

新しいプロジェクトを生成するときは、スタイルファイルにどの拡張子を付けるかを定義することもできます。

ng new sassy-project --style=sass

または、既存のプロジェクトにデフォルトスタイルを設定します。

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

注意：@ schematics/angularはAngular CLIのデフォルトの回路図です。

CLIはインラインスタイルにプリプロセッサを適用できないため、@ Component.styles配列に追加されたスタイル文字列はCSSで記述する必要があります。

角度付きドキュメントに基づく https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

0
Victor Hugo Arango A.

ステップ1。 npmを使ってbulmaパッケージをインストールする

npm install --save bulma

ステップ2。 angular.jsonを開き、以下のコードを更新します。

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

それでおしまい。

Bulmaのツールを簡単に公開するには、angle.jsonにstylePreprocessorOptionsを追加します。

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6

0
BALA

このコマンドを使用してsassを使用するようにプロジェクトを更新しようとしました

ng set defaults.styleExt scss

しかしこれを得た

get/setはconfigコマンドのために廃止予定です。

  • Angular CLI：6.0.7
  • ノード：8.9.0
  • OS：Linux x 64
  • アンギュラ：6.0.3

そこで私は自分のプロジェクトを削除し（私が始めたばかりでプロジェクトにコードがないため）、sassを初期設定した新しいプロジェクトを作成しました

新しいmy-sassy-app --style = scss

しかし、誰かが既存のプロジェクトを更新する方法を共有できればいいと思います。

0
Junaid