私はAngularアプリケーションをリファクタリングしている最中です。コンポーネントを新しいディレクトリの場所に移動するにつれて、コンポーネントのSCSSファイルで@import
パスを処理するのに少し時間がかかります。退屈。
たとえば、アプリケーションのルートにsrc/_mixins.scss
ファイルがあり、src/app/my-widget/my-widget.component.scss
コンポーネントが@import '../../mixins';
のようにSCSSをインポートするとします。すべて順調です。
しかし、その後、my-widget.component
は実際には別のコンポーネントmy-thingy.component
の下の「共有コンポーネント」であると判断したので、src/app/my-thingy
の下にshared
フォルダーを作成し、src/app/my-widget
にあったすべてをそこに移動します。
私希望あなたはまだ私と一緒です...だから、今、src/app/my-thingy/shared/my-widget
を手に入れ、@import '../../../../mixins'
をインポートするためにSCSSファイルを修正しました。
注:これは簡単な例です。いくつかのパスは比較的深くなります(しゃれは意図していません...、またはそうでしたか?)、これらの.
と/
はすべて少し多くなります。
TL; DR
最初からすべてのコンポーネントのSCSSファイルのルートに関連して_mixins.scss
をインポートできたので、super-handyになりますので、リファクタリング時に@import
パスをいじり続ける必要があります。 (例:@import '~/mixins'
の行に沿ったもの)。 このようなものが存在しますか?
私が試したこと(そして、悲しいことに、失敗しました):
@import '~/mixins'; /** I had real hope for this one **/
@import 'mixins'; /** Just being overly optimistic here **/
@import '~//mixins'; /** Now I'm just making stuff up **/
コンポーネントの新しいパスを指すようにmodファイルを修正しなければならないことは理解しています少ないものですよね?
"stylePreprocessorOptions"
オプション。includePaths
を構成できます。includePaths
をsassプラグインに渡します。ビルドツールが何であっても、sassはこれらのパスをルートとして扱うため、次のように直接インポートできます。
includePaths: ["anywhere/on/my/disk"]
ただ@import 'styles'
の代わりに @import 'anywhere/on/my/disk/styles'
。
{}
を使用してプロジェクトパスのトップレベルを参照することもできます。そのため、そのようなものが機能します。
@import "{}/node_modules/module-name/stylesheet";
定義のパスは、Angularのバージョンによって異なります。私たちのプロジェクトでは、古いバージョンはangular-cli.json
を使用し、新しいバージョンはangular.json
を使用します:
"@ angular/cli": "〜1.7.4"では、このパスにangle-cli.jsonを使用します。
"stylePreprocessorOptions": {
"includePaths": [
"../src",
"./scss"
]
},
「@ angular/cli」:「〜7.0.6」で、これを使用します。
"stylePreprocessorOptions": {
"includePaths": [
"./src",
"./src/scss"
]
}
angle-cliの解決策は、stylePreprocessorOptions
を.angular-cli.json
に追加することです。
{
"apps": [{
...
"stylePreprocessorOptions": {
"includePaths": [
"./app/global-styles"
]
},
...
}]
}
サーバー側のレンダリングを使用する場合は、ssr
とメインアプリビルドの両方にこれを追加することを忘れないでください。そうでない場合は、NodeInvocationException: Prerendering failed because of error: Error: Cannot find module 'C:\Users\...\ClientApp\dist-server\main.bundle.js'
を取得します
{
"apps": [{
...
"outDir": "dist",
"stylePreprocessorOptions": {
"includePaths": [
"./app/global-styles"
]
},
...
},
{
...
"name": "ssr",
"outDir": "dist-server",
"stylePreprocessorOptions": {
"includePaths": [
"./app/global-styles"
]
},
...
}
]
}