（Qiitaから移植）(@angular/cli) SCSS, TypeScriptのimportをルートフォルダを基準に指定する。

2017-08-15

本記事は2017年8月16日にQiitaに投稿した記事を移行したものです。

小ネタです。

概要

Angularの公式ページでは、TypeScriptのimportが相対パスで記載されているのでそのまま相対パス書いている方も多いのではないでしょうか。もちろんそのままでも問題ありませんが、油断して階層を深くしてしまうと以下のようなimport文を大量に書かないといけなくなります。

import { FooService } from '../../../../shared/services/foo.service';
import { BarService } from '../../../../modules/bar/services/bar.service';

@import '../../../../../assets/scss/button.scss';

カオスですね。 angular-cliで生成したプロジェクトで、上記をルートフォルダ（package.jsonがあるフォルダ）を基準にimportできるようにしていきます。（angular-cli 1.3.0を使用しています。）

TypeScript

package.jsonと同じ階層にあるtsconfig.jsonをいじります。

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }
  }
}

以下の部分を追記しました。

    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"]
    }

srcフォルダを基準にしてappフォルダ以下にアクセスするためのエイリアスを@appとして定義しています。こうすることで、以下のようにパスが指定できます。

import { FooService } from '@app/shared/services/foo.service';
import { BarService } from '@app/modules/bar/services/bar.service';

もちろん、app以下にエイリアスを定義してもOKです。

    "baseUrl": "src",
    "paths": {
      "@shared/*": ["app/shared/*"],
      "@modules/*": ["app/modules/*"]
    }

import { FooService } from '@shared/services/foo.service';
import { BarService } from '@modules/bar/services/bar.service';

SCSS

そもそも~でルートディレクトリが示せるので、相対パスを書かずに

@import '~assets/scss/button.scss';

と書けばOKです。

まとめ

TypeScriptとSCSSの標準機能だけでなんとかなるのでお手軽でした。階層が深くなりすぎないよう予め構成を検討できるに越したことはないですが、相対パス問題でお悩みの方、ぜひ。

#TypeScript

#Angular

（Qiitaから移植）(@angular/cli) SCSS, TypeScriptのimportをルートフォルダを基準に指定する。

概要

TypeScript

SCSS

まとめ

Share