web-dev-qa-db-ja.com

Angular 8ユニバーサルビルドがSCSSインポートで失敗しました

AngularCLIとAngular v8を使用しています。Angular Universalに関して、これらのコマンドを実行した後、次の準備手順である問題が発生しました。セットアップ：

ng generate universal --clientProject <project_name>

npm install @nguniversal/module-map-ngfactory-loader    
npm install @nguniversal/express-engine

Add ModuleMapLoaderModule on AppServerModule

または

ng add @nguniversal/express-engine --clientProject <project_name>
npm run build:ssr && npm run serve:ssr

ng build --configuration stagingまたはng build --prodを実行すると、ビルドはエラーなしで成功します。

しかし、ng run app:server:stagingまたはng run app:server:productionを実行すると、次のようなエラーが発生します。

ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import 'base/colors';

Can't find stylesheet to import.

....

私のangular.jsonには次のSCSS設定があります。

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  },

 ...

 "stylePreprocessorOptions": {
     "includePaths": [
     "src/",
     "src/assets/styles", 
     "node_modules"
    ]
 },

私が何かを逃したかどうか、または何かを変更する必要があるかどうかを尋ねたいですか？

これらのコマンドを再インストールまたは実行しようとしましたが、うまくいきませんでした。

rm -rf node_modules
rm package-lock.json
npm install
npm install node-sass

Node-sassをインストールすると、"Can't find stylesheet to import."エラーメッセージから、"File to import not found or unreadable: base/colors."になります。

angularangular-universal
2
KShewengger

同じコマンドを実行してssr "Angular Universal"をビルドしているときに、同じ問題 "モジュールビルドのエラーが失敗しました...インポートするスタイルシートが見つかりません"に直面しました。何らかの理由で、ビルドプロセスは「stylePreprocessorOptions」パス参照を無視しています。

解決策1：

ファイルを指すように@import参照を変更します

例

@import "~src/assets/styles/apptheme";
@import "~src/assets/styles/functiontheme";

の代わりに

@import "apptheme";
@import "functiontheme";

ソリューション2：

Angle.jsonを開いて「server」>>「options」を探し、ディレクトリ参照を追加します

"stylePreprocessorOptions": {
          "includePaths": [
            "src/assets/styles"
          ]
        }

例：

"server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "tsconfig.server.json",
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/assets/styles"
          ]
        }
      },....
2
Elias Sh.

@ elias-sh が機能しないソリューションがない場合は、scssファイルを削除して再作成してください。

0
Vladyslav Hrehul