I have an Angular application where I want share some CSS styles from multiple components, therefore I use:

@import "mycommoncss.css";

from all components CSS files. Instead of using the full relative path to the css (which works), I would like to use stylePreprocessorOptions in angular.json.

I add the configuration like this in angular.json:

{
  "projects": { 
    "myapp" : {
      "architect" : {
        "build" : {
          "options" : {
            ..
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/common_styles"
              ]
            },
            ..

When I use build (node_modules/.bin/ng build –configuration production –base-href=’.’), it works fine. The file mycommoncss.css is found, the CSS stylesheets are applied.

But when I use serve (node_modules/.bin/ng serve –port 4207 –host 0.0.0.0 –proxy-config proxy.conf.js –disable-host-check), I get an exception while the internal server starts up:

...
./src/app/components/club/club.component.css?ngResource - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'mycss.css' in '/home/XXX/projects/XXX/xxx-app-gui/src/app/components/club'

For me it looks as:

• The angular system knows about the preprocessor directive (it could not build otherwise)
• But there is a bug in serve
• Although: I cannot really believe that I would be the only one to experience this, so I think I have missed something.

Any help is appreciated. Thanks.