Angular 8 Universal Build 在 SCSS 导入上失败

Posted 2023-02-19

【中文标题】Angular 8 Universal Build 在 SCSS 导入上失败

【英文标题】：Angular 8 Universal Build Failed on SCSS Imports

【发布时间】：2020-03-29 22:37:13

【问题描述】：

我正在使用 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:s-s-r && npm run serve:s-s-r

当我运行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."

【问题讨论】：

面临与 scss 引用“找不到要导入的样式表”相同的问题...如果您找到任何解决方案，请分享。

【参考方案1】：

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

解决方案 1：

更改@import 引用以指向文件

例子

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

而不是

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

解决方案 2：

打开 angular.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"
          ]
        
      ,....

【讨论】：

非常感谢！虽然对我有用的是没有波浪号（~），而只是直接指定“@import”src/assets/styles/”。不过，期待他们支持直接路径而不是指定完整路径

谢谢。通过添加 stylePreprocessorOptions.includePaths = ['node_modules'] 它对我有用。

嘿！您的更改对我有用-但没有“服务器”-我的路径是项目->项目名称->架构师->构建->角度配置部分angular.io/guide/workspace-config#style-preprocessor-options

也引用了这一点

解决方案 #2 非常适合我。我使用它是因为我不想大量更改我的代码。非常感谢@Elias Sh

【参考方案2】：

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