Angular 8 Universal Build Failed on SCSS Imports

Question

I am using AngularCLI and an Angular v8. In regards to Angular Universal, I have encountered an issue where after I run these commands which are the preparatory steps to setup:

ng generate universal --clientProject <project_name>

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

Add ModuleMapLoaderModule on AppServerModule

or

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

When I run ng build --configuration staging or even ng build --prod, the Build is successful with no errors.

But when I run ng run app:server:staging or ng run app:server:production, I will encounter an error like below:

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

@import 'base/colors';

Can't find stylesheet to import.

....

My angular.json has these following SCSS config:

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

 ...

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

Would like to ask If I have missed something or if there's something needed to change?

---

Have tried reinstalling or running these commands but stil no luck:

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

When installing the node-sass, from "Can't find stylesheet to import." error message, it is now "File to import not found or unreadable: base/colors."

Answer 1

I faced the same issue "ERROR in Module build failed... Can't find stylesheet to import" while running the same command to build ssr "Angular Universal". for some reason the building process is ignoring "stylePreprocessorOptions" path reference.

Solution 1:

change the @import reference to point to the files

example

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

instead of

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

Solution 2:

Open angular.json look for "server" >> "options" and add the directory reference

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

Example:

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