(Qiitaから移植)(@angular/cli) SCSS, TypeScriptのimportをルートフォルダを基準に指定する。
本記事は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の標準機能だけでなんとかなるのでお手軽でした。 階層が深くなりすぎないよう予め構成を検討できるに越したことはないですが、相対パス問題でお悩みの方、ぜひ。