web-dev-qa-db-ja.com

angular 2でSassを使用する

Angular 2プロジェクトでSassをセットアップしようとしています。基本的に私が理解しているように、angular 2プロジェクトを作成するには2つの方法があります

1）angular-cliの使用（- https://github.com/angular/angular-cli ）

https://stackoverflow.com/a/41541042/2868352 に記載されている回答を参照し、angular 2プロジェクトでscssファイルを正常に使用できました。プロジェクトフォルダー内のcssファイルから生成されたscssファイルを見つけることができませんでした。 cssファイルが生成されなかったが、それでも機能する理由を誰かが説明できますか？

2）quickstart seedの使用（ https://angular.io/guide/quickstart ）

クイックスタートプロジェクトでsassを設定する方法に関する情報を取得できませんでした。 Angularが提供するクイックスタートプロジェクトでsassを使用することについて考えている人はいますか？

前もって感謝します！

cssangularsass
25
Abhishek V

[angular cli]を使用している場合は、この回答の最後に編集された部分を確認してください

「クイックスタートシード」でsassを使用する方法を説明する（- https://angular.io/guide/quickstart ）（- https://angular.io/guide/setup#download ）

次の簡単な手順に従ってください。

ステップ1：クイックスタートシードをセットアップする

以下のコマンドを使用してセットアップします

npm install
npm start

ブラウザに「Hello Angular」と表示されます。

ステップ2：node-sassおよびsass-loaderをインストールします

以下のコマンドを使用してインストールします

npm i node-sass -S
npm i sass-loader -S

これで、 'package.json'ファイル内の 'dependencies'にこれらの両方が追加されていることがわかります。

ステップ3：SassコードとCssコード用に2つのフォルダーを作成します

「quickstart-master」フォルダーに任意の名前の2つのフォルダーを作成します。この場合、たとえば「sass_folder」と「css_folder」です。次に、デモファイル「demo.sass」を作成し、「sass_folder」内に配置します。この.sassファイルに単純なsassコードを挿入できます。次のようになります。

  $font-stack:    Helvetica, sans-serif
  $primary-color: #000

  body
    font: 100% $font-stack
    color: $primary-color

ステップ4：「package.json」ファイルに変更を加えます

「sass_folder」にあるSassコードのビルドと監視にスクリプトを追加します。コンパイル後、結果のcssコードは「css_folder」に保存されます。変更後、「package.json」ファイルの「スクリプト」は次のようになります。

"scripts": {
     "build": "tsc -p src/",
     "build:watch": "tsc -p src/ -w",
     "build:e2e": "tsc -p e2e/",
     "serve": "lite-server -c=bs-config.json",
     "serve:e2e": "lite-server -c=bs-config.e2e.json",
     "prestart": "npm run build",
     "start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
     "pree2e": "npm run build:e2e",
     "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
     "preprotractor": "webdriver-manager update",
     "protractor": "protractor protractor.config.js",
     "pretest": "npm run build",
     "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
     "pretest:once": "npm run build",
     "test:once": "karma start karma.conf.js --single-run",
     "lint": "tslint ./src/**/*.ts -t verbose",
     "build:sass": "node-sass sass_folder/ -o css_folder",
     "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
  }

「start」、「build：sass」、「watch：sass」のみをご覧ください。

ステップ5：アプリケーションを実行する

これで、以下のコマンドを使用してアプリを実行できます。

npm start

同じファイル名「demo.css」でコンパイルされたcssコードが「css_folder」に表示されます。次のようになります（この場合）。

body {
  font: 100% Helvetica, sans-serif;
  color: #000; }

これで、.sassファイルに変更を加えた場合、スクリプトがコードを監視しているため、.cssファイルに動的に反映されます。

エラーが表示された場合は、.sassファイルに変更を加えたときに.cssファイルを閉じます。

注：scssコードの場合、同じ手順を実行できます。この場合、.scssファイルを「sass_folder」に入れるだけです。

[編集済み]Angular CLIを使用する場合：

新しいAngularプロジェクトの作成時に、下記のcmndsを使用します。

Sassの場合：

ng new Demo_Project --style=sass

Scssの場合：

ng new Demo_Project --style=scss

既存のスタイルを変更するには：

ng set defaults.styleExt scss

この後、Cliを通常どおり使用できます。

42
AmanDeepSharma

最初のことを説明できます。

ng serverを使用している場合、コンパイルされたファイルはプロジェクトの隠しフォルダーに保存されます。

ng buildを使用している場合は、/ distフォルダーにコンパイル済みファイルが表示されます。このフォルダーでは、ファイルstyles。[hashversion] .cssで一般的なスタイルを見つけることができますが、ローカルコンポーネントスタイルは、Webpackによってmain。[hashversion] .jsに含まれています。

Angular-cliはwebpackを使用します。詳細については、 Webpack Docs を参照してください。

UPDATE

2番目のケースでは、sassを手動でコンパイルする必要があります。 appフォルダーには、TypeScript Compilerによってapp.component.jsと同じフォルダーでコンパイルされるapp.component.tsがありません。したがって、sassでも同じことをする必要があります。コンポーネントにCSSファイルをインポートします。

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  stylesUrl: ['app/app.component.css']
})
export class AppComponent  { name = 'Angular'; }

すべてがルートディレクトリから要求されるため、相対パスを使用できないことに注意してください。

app.component.sassを作成し、スタイルを内部に配置します。

次に、app.component.sassをapp.component.cssにコンパイルするsassコンパイラーを実行します

サーバーを実行すると動作します。

5
Serginho

ここには2つの主なシナリオがあります。

  1. 新しいAngular CLIプロジェクトを作成するときは、CLIコマンドを使用します

    ng new my-angular-app --style=scss

  2. Angular CLIプロジェクトが既にセットアップされている場合、CLIコマンドを使用します

    ng set default.styleExt scss

ケース2では、既存の.cssファイルを手動で変換する必要があります。 sassの代わりにlessまたはscssを使用することもできます

こちらの記事全文をご覧ください。

Angular CLIプロジェクトでSCSS/SASS/LESSを使用

1
Jayesh Panchal