Question

我正在使用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

从"Can't find stylesheet to import."错误消息安装节点资源时，它现在是"File to import not found or unreadable: base/colors."

Answer 1

在运行相同的命令来构建ssr“ Angular Universal”时，我遇到相同的问题“ 模块构建失败，错误...找不到要导入的样式表”。由于某些原因，构建过程会忽略“ stylePreprocessorOptions”路径引用。

解决方案1 ：

更改@import引用以指向文件

示例

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

代替

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

解决方案2 ：

打开angular.json查找“服务器” >>“选项”，然后添加目录引用

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

Answer 2

如果@elias-sh提供的解决方案都不起作用->只需删除您的scss文件并重新创建即可。

导入SCSS时Angular 8通用构建失败

2 个答案: