[Angular] コンポーネントのscssでアプリ全体で使う変数を使用する方法
マテリアルデザインの余白の8pxとかを変数に定義してアプリ全体で使いたかったので方法を調べました。
方法
angular.jsonにstylePreprocessorOptionsを追加します。この設定だと src/sass 以下のscssファイルが、ディレクトリ名指定無しにインポートできるようになります。
angular.json
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
+ "stylePreprocessorOptions": {
+ "includePaths": [
+ "src/sass"
+ ]
+ },
"scripts": []
次に変数を定義するファイルをsrc/sassに作成します。
src/sass/variables.scss
$single-space: 8px;
$double-space: 16px;
最後に利用したいコンポーネントのscssでインポートして使用します。
src/app/hoge.component.scss
@import "variables";
.form-action-container {
margin-top: $double-space;
margin-bottom: $double-space;
}
注意点はng serveは再起動する必要があるところ。
参考
https://stackoverflow.com/questions/50878691/how-to-import-sass-files-in-angular-6
Author And Source
この問題について([Angular] コンポーネントのscssでアプリ全体で使う変数を使用する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/sekitaka_1214/items/90b6c9d8ff011b791c94著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .