Angular：JSON変数をSCSSに解析する方法

Angularアプリケーション内では、プレーンD3またはVegaのいずれかを介してD3ビジュアルを実行します。SCSSスタイリングも進行中です。

JavaScriptとSCSSからのスタイル設定で同じグローバル変数を参照できるようにしたいと思います。JSONファイルは、単純なimportステートメントを通じてTypescriptにロードする設定を保存するのに非常に役立ちます。しかし、SCSSから同じようにするにはどうすればよいですか？

node-sass-json-importer 良い候補のようですが、Angular 9 CLIアプリケーションに追加することは私には明らかではありません。

このStackOverflowの投稿はしばらく前にトピックについてブラッシュアップしましたが、node_modules持続可能性がほとんどないリソースの変更が含まれていました。

元のドキュメントには、Angular以外のアプリでWebpackをいかに調整するかについてのいくつかの入力もあります。これをCLI経由で構築されたAngularアプリに関連付ける方法がわかりません。

Webpack / sass-loader Blockquote

Webpack v1

import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    loaders: [{
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }],
  },
  // Apply the JSON importer via sass-loader's options.
  sassLoader: {
    importer: jsonImporter()
  }
};

Webpack v2

import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    rules: [
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          },
        },
        {
          loader: 'sass-loader',
          // Apply the JSON importer via sass-loader's options.
          options: {
            importer: jsonImporter(),
          },
        },
      ],
    ],
  },
};

カスタムWebpackルールの設定にnode_modules使用@angular-builders/custom-webpackしたり、node-sass-json-importerSCSSファイル内にJSONファイルをインポートしたりすることで、ファイルを変更せずにそれを行うことができます。

はと互換性があるnode-sassため、implementationオプションをインストールする必要があります。node-sass-json-importernode-sass

1. パッケージのインストール@angular-builders/custom-webpack、node-sass-json-importerおよびnode-sass：

   npm i -D @angular-builders/custom-webpack node-sass-json-importer node-sass

2. webpack.config.js次の内容で、プロジェクトのルートディレクトリにWebpack構成ファイル（）を作成します。

   const jsonImporter = require('node-sass-json-importer');
   
   module.exports = {
     module: {
       rules: [{
         test: /\.scss$|\.sass$/,
         use: [
           {
             loader: require.resolve('sass-loader'),
             options: {
               implementation: require('node-sass'),
               sassOptions: {
                 // bootstrap-sass requires a minimum precision of 8
                 precision: 8,
                 importer: jsonImporter(),
                 outputStyle: 'expanded'
               }
             },
           }
         ],
       }],
     },
   }

3. に変更builderし@angular-builders/custom-webpack:[architect-target]てcustomWebpackConfigオプションをbuildに追加し、内部にターゲットserveをtestビルドしますangular.json。

   "projects": {
     ...
     "[project]": {
       ...
       "architect": {
         "build": {
           "builder: "@angular-builders/custom-webpack:browser",
           "options": {
             "customWebpackConfig": {
               "path": "webpack.config.js"
             },
             ...
           },
           ...
         },
         "serve": {
           "builder: "@angular-builders/custom-webpack:dev-server",
           "customWebpackConfig": {
             "path": "webpack.config.js"
           },
           ...
         },
         "test": {
           "builder: "@angular-builders/custom-webpack:karma",
           "customWebpackConfig": {
             "path": "webpack.config.js"
           },
           ...
         },
       },
       ...
     },
     ...
   }

これで.json、任意のコンポーネント.scssファイル内に任意のファイルを含めることができます。

hello-world.component.scss：

@import 'hello-world.vars.json';

.hello-bg {
  padding: 20px;
  background-color: $bg-color;
  border: 2px solid $border-color;
}

hello-world.vars.json：

{
  "bg-color": "yellow",
  "border-color": "red"
}

私はGithubリポジトリを作成しました。これらはすべて機能しており、ここから複製してテストできます。https：//github.com/clytras/angular-json-scss

git clone https://github.com/clytras/angular-json-scss.git
cd angular-json-scss
npm install
ng serve

別のオプションはを使用するraw-loaderことです。これはangular-cliでデフォルトで使用できます。このようにして、未加工のscssファイルをtsコンポーネントにロードできます。

// Adding `!!` to a request will disable all loaders specified in the configuration
import scss from '!!raw-loader!./config.scss';

console.info('scss', scss);

.d.tsファイルでモジュールを宣言する必要があります：

declare module '!!raw-loader!./*.scss';

次に、必要な情報を抽出できます。

したがって、JSONをscssにロードする代わりに、scssをtsにロードできます。

私はあなたのために比較的簡単なアプローチを持っています：

ステップとnode-sassステップを分離し、角度付きアプリのファイルの代わりにng build生成された.cssファイルを使用sassします。

これには2つの利点があります。

• ノードモジュールを大幅に調整して編集する必要はありません
• sassのコンパイル方法を完全に制御

実装については、次のようにします。

1. 例./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/cli.js --recursive ./src --output ./srcのスクリプトにpackage.json名前を付けて追加しますbuild-sass。このコマンドを調整して、再帰モードが必要なsassファイルのみを含めることができます（angular.jsonでそれらを無視して、2回コンパイルされないようにしてください）。
2. プロジェクトにファイルnpm run build-sassを生成するには、コマンドを1回実行し.cssます。
3. 必要な角度成分の変化を参照.sassします.css
4. （オプション）package.jsonのように、プロジェクト全体をビルドするときにいつでも実行できる便利なコマンドnpm run build-sass && ng buildを追加compileします。

このアプローチは比較的単純ですが、いくつかの欠点があります

• cssを使用するコンポーネントの場合、のホットリロード機能でng serveはnpm run build-sass、スタイルに加えた変更をリアルタイムで確認するためにを実行する必要があります
• あるので、あなたのプロジェクトは、ビットメシエを見ていきます.scssと.cssで同じコンポーネント用のファイル/srcそのフォルダ.cssが生成されます。生成さ.cssれたものを誰かが誤って編集してそれらの変更が上書きされないようにする必要があります（たとえば、サフィックスまたはコメントを追加することによって）。

他のアプローチでは、ほとんどの場合、既存の編集または独自のWebpackコンパイラの大幅な編集が必要になります。