web-dev-qa-db-ja.com

ルートに対するSCSSインポート

私は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'の行に沿ったもの）。 このようなものが存在しますか？

私が試したこと（そして、悲しいことに、失敗しました）：

  1. @import '~/mixins'; /** I had real hope for this one **/
  2. @import 'mixins'; /** Just being overly optimistic here **/
  3. @import '~//mixins'; /** Now I'm just making stuff up **/

コンポーネントの新しいパスを指すようにmodファイルを修正しなければならないことは理解しています少ないものですよね？

angularsasswebpackangular-cli
27
Steve Gomez
  • Angular CLIを使用している場合は、 グローバルスタイル 、"stylePreprocessorOptions"オプション。
  • Webpackの場合、sassLoaderプラグイン構成でincludePathsを構成できます。
  • Gulpビルドでも同様です。includePathsをsassプラグインに渡します。

ビルドツールが何であっても、sassはこれらのパスをルートとして扱うため、次のように直接インポートできます。

includePaths: ["anywhere/on/my/disk"]

ただ@import 'styles' の代わりに @import 'anywhere/on/my/disk/styles'。

42
Sasxa

{}を使用してプロジェクトパスのトップレベルを参照することもできます。そのため、そのようなものが機能します。

@import "{}/node_modules/module-name/stylesheet";
8
helcode

定義のパスは、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"
    ]
 }
2
Serkan KONAKCI

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"
                ]
            },
            ...
        }
    ]
}
0
godblessstrawberry