productionでangular4アプリケーションを再コンパイルするには？

Question

私はAngular 4アプリでテーマスタイリングをサポートする最良の方法を見つけようとしています。 私はSASS変数を使用しています。テーマ設定は、4つのSASS変数に依存しています。プライマリとセカンダリのカラー、バックグラウンドイメージ、スイッチはダーク/ライトテーマです。

今、私はアプリケーションからテーマを動的に変更したいと思います。

私はsass-vars-loaderライブラリ（https://github.com/epegzz/sass-vars-loader）を使用しています。アプリケーション構築中にJSONファイルから_vars.scssにsass変数をロードしています。コンポーネントからこれらの変数を変更すると、JSONファイルに新しい値を書き込んで、そのファイルの変更を監視しながらアプリケーションを再コンパイルします。

これは、開発中に新しい変数を_vars.scssに適切に再コンパイルして読み込んでいますが、私はそれをどのようにプロダクションでサポートできますか？

webpackを設定できるようにするため、webcam.config.jsを$ng ejectで取り除いたので、これ以上angi-cliコマンドを使用しませんでした。

// webpack.config.js 

... 

{ 
    "test": /\.scss$|\.sass$/, 
    "use": [ 
     "style-loader", 
     { 
     "loader": "css-loader", 
     "options": { 
      "sourceMap": false, 
      "importLoaders": 1 
     } 
     }, 
     { 
     "loader": "postcss-loader", 
     "options": { 
      "ident": "postcss", 
      "plugins": postcssPlugins 
     } 
     }, 
     { 
     "loader": "sass-loader", 
     "options": { 
      "sourceMap": false, 
      "precision": 8, 
      "includePaths": [] 
     } 
     }, 
     // Reads Sass vars from JSON 
     { loader: "@epegzz/sass-vars-loader", options: { 
     files: [ 
      path.resolve(__dirname, 'src/theme.json') 
     ] 
     } 
    } 
    ] 
    }, 

... 

"devServer": { 
setup: function(app) { 
    app.use(bodyParser.json()); 
    app.use(bodyParser.urlencoded({ 
    extended: true 
    })); 

    app.post("/theme", function(req, res) { 
    var payload = req.body, 
     theme; 

    fs.writeFileSync('src/theme.json', JSON.stringify(payload, null, 3)); 
    res.send("Success"); 
    }); 
}, 
} 

私はWebPACKの-devのサーバーのようなjsutは、開発中にやっている、私のアプリを提供し、変更を監視するカスタムのNode.jsサーバーを作成する必要があるとします。

ご協力いただきありがとうございます。

Answer 1

ビルドツールを使用する戦略を再考することをお勧めしますが、必要な結果を得るためにサーバーを構築する必要があるとは思われません。

すべてのテーマをコンパイルし、実行時に「スワップ」することができます。 Replacing css file on the fly (and apply the new style to the page)

テーマが固定されていない、つまり任意の組み合わせが可能な場合は、メインのHTMLページに「テーマ」のCSSを埋め込み、必要に応じてそれらの値をスワップできます。 Change CSS rule at runtime

---編集---

私は完全にあなたのアプリケーションのライフサイクルのこの時点での主要な設計変更をしなければならないために威圧的だということを理解するが、私はあなたの現在のアプローチをしようとしていることを非常に確信していますあなたの頭痛が顕著に現れます。

Angular、SCSS、nodeなどは、あなたが記述しているシナリオを意図したものではなく、また自分自身ではありません。

説明しているシナリオでは、ユーザーが「テーマ変更」をトリガーすると、ウェブサイトは再コンパイルされている間に「オフラインになる」ことになり、CSSを適用した結果のテーマはサイトを使用しているすべてのユーザーに表示されます。

また、ブラウザはあなたのscssファイルを使用していないので、ng4のケースで信じるすべてのSCSSファイルのコンパイル済み出力を使用しています.CSSファイルが埋め込まれています。

角度を再コンパイルしないでください（多くの追加のバックエンドサーバーの作業が必要になり、複雑さや信頼性の問題が発生する可能性があります）ためには、varsを取​​得して移植する必要があります。 SCSSファイルを作成し、他のすべてのSCSSファイルと組み合わせて、CLIがCSS組み込みのJSファイルを生成し、それをブラウザにロードして最初のものを置き換える方法を複製してください。そして、javascript /ブラウザで実行中のtypescript。

あなたのアプリを少し再デザインし、CSSの「オーバーレイ」ファイルを作成し、実行時に値を入れ替えてDOMにロードしてテーマを変更します。 他の人もここに加重されると確信していますが、できるだけ早く、あなたが望む結果を得るために進む方がはるかに良い方向だと思います。