私はAngularを初めて使用し、Emberコミュニティから来ました。Ember-CLIに基づく新しいAngular-CLIを使用しようとしています。

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

それは機能しませんでしたが、私が何かを誤って設定しただけかどうか再びわかりません。

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

Angular CLIバージョン9（Angular 9プロジェクトの作成に使用）はstyle、ではなく回路図から取得するようになりましたstyleext。次のようなコマンドを使用します。
ng config schematics.@schematics/angular:component.style scss
結果のangular.jsonは次のようになります。

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

その他の考えられる解決策と説明： sassをサポートするAngular CLIで新しいプロジェクト

を作成するには、次のことを試してください。

ng new My_New_Project --style=scss 

--style=sass＆も使用できます。違いがわからない場合は、この短く簡単な記事を読んでください。それでもわからない場合は、scssそのまま学習を続けてください。

角度5のプロジェクトがある場合は、このコマンドを使用してプロジェクトの構成を更新します。

ng set defaults.styleExt scss

最新バージョンの場合

Angular 6がCLIで既存のプロジェクトに新しいスタイルを設定するには：

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

または直接angular.jsonに：

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

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の場合）

新しいプロジェクト

新しいプロジェクトの場合、オプションを設定する--style=sassか--style=scss、目的のフレーバーSASS / SCSSに従って設定できます

• SASS構文を使用する

  ng new project --style=sass 
  

• SCSS構文を使用する

  ng new project --style=scss 
  

次にインストールしnode-sass、

npm install node-sass --save-dev

既存のプロジェクトを更新する

でangular-clisassファイルをコンパイルするためにnode-sass、私は実行しなければなりませんでした、

npm install node-sass --save-dev 

をインストールしますnode-sass。その後

• SASS構文

  ng set defaults.styleExt sass
  

• SCSS構文

  ng set defaults.styleExt scss
  

デフォルトのstyleExtをsassに設定する

（または）

変更styleExtするsassかscssで所望の構文については.angular-cli.json、

• 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"
        ],
  

当局のgithub repoからの引用-

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

npm install node-sass

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

こちらをご覧ください

• https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

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

--style scssプロジェクトを生成するたびにパスを回避するには、次のコマンドを使用して、angular-cliのデフォルト構成をグローバルに調整することができます。

ng set --global defaults.styleExt scss

angular-cliの一部のバージョンには、上記のグローバルフラグの読み取りに関するバグが含まれていることに注意してください（リンクを参照）。バージョンにこのバグが含まれている場合は、次のコマンドでプロジェクトを生成します。

ng new some_project_name --style=scss

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

ng new My_New_Project --style=scss 

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

ng set defaults.styleExt scss

詳細については、こちらのドキュメントをご覧ください。

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

私は、scssファイルへの移行に非常に迷惑なことに気づきました!!! 一つは、単純なものから移動しなければなりません：styleUrls: ['app.component.scss']にstyleUrls: ['./app.component.scss']（追加./で）app.component.ts

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

最高かもしれない ng new myApp --style=scss

次に、Angular CLIは、scssを使用して新しいコンポーネントを作成します...

scssおそらくご存知のように、ブラウザで機能しないことを使用することに注意してください。コンパイルするために何かが必要です。cssこのためnode-sass、以下のようにインストールできます。

npm install node-sass --save-dev

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

webpackを使用している場合は、こちらをお読みください。

既存の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スターターからここに。

ng set --global defaults.styleExt=scssng6以降は非推奨です。次のメッセージが表示されます。

get / setは非推奨になり、configコマンドが優先されます

あなたは使うべきです：

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

特定のプロジェクトをターゲットにする場合（{project}をプロジェクトの名前に置き換えます）：

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

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" }

以下のための角度9.0と更新し、上記"schematics":{}でオブジェクトをangular.jsonこのようなファイル：

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

以下は、角度のあるCLI 6プロジェクトで機能するはずです。つまり、あなたが得ている場合：

get / setは非推奨になり、configコマンドが優先されます。

npm install node-sass --save-dev

次に（プロジェクト名を必ず変更してください）

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

デフォルトのプロジェクト名を取得するには、以下を使用します。

ng config defaultProject

ただし 、プロジェクトを6未満からAngular 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に変更し、コンポーネントなどの参照を更新する必要がありますが、実行しても問題ありません。

2019年3月10日の時点で、Anguarはsassのサポートを中止しました。--style実行時にどのオプションを渡しても問題はなく、ng new常に.scssファイルが生成されます。sassのサポートが説明なしに削除されたのは残念です。

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

ng set defaults.styleExt=scss --global

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

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

ng set defaults.styleExt scss

しかしこれを得た

get / setは非推奨になり、configコマンドが優先されます。

• Angular CLI：6.0.7
• ノード：8.9.0
• OS：Linux x64
• 角度：6.0.3

だから私はプロジェクトを削除しました（始めたばかりでプロジェクトにコードがなかったため）、最初にsassが設定された新しいプロジェクトを作成しました

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

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

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

npm install --save bulma

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

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

それでおしまい。

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

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

ブルマ+アンギュラー6