web-dev-qa-db-ja.com

SASSでAngular 4を使用する方法

Angular4とsassを使用して最初のプロジェクトを開始し、sassを適切な方法で使用する方法を見つけようとしています。 angular-cliを使用していますが、scss構文を使用するようにデフォルトのスタイルを既に設定しています。コンパイルなどもすでに定義しています。

ただし、コンポーネントにstyleUrlsオプションがあり、場合によってはそのコンポーネントでのみ使用されるスタイルを定義することがわかりました。

問題は、そのscssにcomponentファイルを設定すると、それが生成されない.cssファイルがメイン.cssファイルに含まれず、ルートプロジェクト。

だから基本的に私はこのようなプロジェクト構造を持っています：

app
    app.module.ts
    app.routing.ts
    home
        home.component.ts
        home.html
        _home.scss
    client
        client.component.ts
        client.html
        _client.scss
scss
    _imports.scss
    colors
        _colors.scss
    ui
        _button.scss
        _table.scss
    //.. more folder and files
styles.scss
index.html

そして、styles.scssファイル内のメインcssスタイルを設定できるようにしたいのですが、これは後でビルドプロセスでindex.htmlファイルに挿入されます。しかし、私が持っているコンポーネントごとに単一のcssファイルを生成することもできます。 homeおよびclientを使用し、それらのcssスタイルのみを独自のcomponent内で使用します。

それを行うことは可能ですか？私はそれをやろうとしましたが、これに関する他のリソースは見つかりませんでした！

cssangularsassangular-clicss-preprocessor
13
celsomtrindade

探しているのは import directive ：

@import "styles.scss";  
@import "css/styles.scss";  
@import url("http://example.com/css/styles.scss");

これにより、CSSが他のCSSファイルからメインCSSファイルにインポートされ、各ファイルの内容が、挿入を選択した順序に基づいてメインファイルに追加されます。

しない.scssファイル拡張子が必要であることに注意してください。SASSが自動的に処理するため、@import "file"を使用して簡単にインポートできます。また、すべてのファイルを単一のインポートで結合できるため、独立したインポートで各ファイルを指定する必要もありません。

@import "styles.scss", "css/styles.scss", url("http://example.com/css/styles.scss");

セレクター内で@importを指定して、ネストされたインポートを行うこともできます。

.global-nav {  
  @import "nav-bkgd";
}

お役に立てれば！ :)

5
Obsidian Age

Ng-cliを使用したAngular 4.4+では、.angular-cli.json

{
  ...
  "apps": [
    ...
    "styles": [
        "styles.scss"
      ],
      ...
  ]
  ...
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

各コンポーネントで、必要に応じて、.cssから.scss

@Component({
    selector: 'app-your-component',
    styleUrls: ['./your-component.component.scss']
})
5
creep3007

プロジェクトを作成するときにscssを指定できます。

ng new project-name --style scss
2
rch850

私は同じ問題を抱えていて、leftnavコンポーネントがあり、そのscssがコンパイルされていないようで、上記のすべてを試しましたが機能しませんでした.ng newを使用して新しいアプリを作成しようとしました....私の考えを変えることで：D

相対的な.scssファイル内でsame component selectorを使用することはできないようですが、代わりに適切なclassNameでラッピングdivを使用し、その.classNameを.scssファイルコンテンツのルートラッピングとして使用する必要があります。

デモさせてください、これは私のアプリです：

app/component/leftnav
  |leftnav.scss
  |leftnav.html ==> simply `left nav works!`
  |leftnav.ts ==> selector leftnav
app/
  |app.html
  |app.scss

そして、古いleftnav.scss内

leftnav{
    background:red;
}

およびapp.html内

<leftnav></leftnav>

そしてどのように私はそれを修正しました！クラス名.leftnav内にleftnav.htmlを含むラッピングdivを追加して、コンポーネントセレクターの代わりにleftnav.scssのルートラッピングとして使用することで述べたように

だから私の新しい

.leftnav{
    background:red; 
}

そしてそれは動作します！

0
Moath.Omar

既に作業中のプロジェクトがある場合ng new my-sassy-app --style=scssは役に立たないので、ng set defaults.styleExt scssこれが変更angular.cli.jsonファイルとして

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

すでに存在するcssファイルをscss拡張子に変更すると、scssが機能していることがわかります。コンポーネント定義のcss拡張子をscssに変更することを忘れないでください ソース

0
Black Mamba