15

I'm running the following command:

ng build --prod --aot --base-href ./

And receiving;

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

$clr-popover-box-shadow-color: rgba(clr-getColor(dark), 0.25);
                              ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in /Users/allan/git/dcfrontend/node_modules/@clr/ui/src/utils/_variables.global.scss (line 84, column 32)

I'm on Angular 7 and Clarity 1.04.

Extract from my angular.json:

        "styles": [
          "node_modules/@clr/icons/clr-icons.min.css",
          "node_modules/@clr/ui/clr-ui.min.css",
          "node_modules/prismjs/themes/prism-solarizedlight.css",
          "src/styles.css",
          "node_modules/lato-font/css/lato-font.min.css"
        ],
        "scripts": [
          "node_modules/core-js/client/shim.min.js",
          "node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
          "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
          "node_modules/web-animations-js/web-animations.min.js",
          "node_modules/prismjs/prism.js",
          "node_modules/prismjs/components/prism-typescript.min.js",
          "node_modules/@clr/icons/clr-icons.min.js"
        ]
Allan Bowe
  • 12,306
  • 19
  • 75
  • 124

10 Answers10

30

I was also getting the same error and i solved it by running the below npm command:

npm rebuild node-sass
Saniya syed qureshi
  • 3,053
  • 3
  • 16
  • 22
10
npm install node-sass

Worked for me :) Just try this if "npm rebuild node-sass" not worked

Gopala Raja Naika
  • 2,321
  • 23
  • 18
4

This solve my issue npm install --save-dev --unsafe-perm node-sass

Kingsley
  • 63
  • 7
3

check for the supported version. As on date I had node 12.x installed on my machine and spent an hour running npm install node-sass and npm rebuild node-sass with --force and --save-dev hints.

Nothing worked until I uninstalled the node 12.x and installed node 10.x. So if you're hitting the same problem and could not get it to work, try following

  • Check if your Node version (Run node -v) if it's higher than 10.x
  • Uninstall the Node 12.x from your machine
  • Download and Install Node 10.x
  • Restart the console/editor (not required for all and may work without this step)
Sunny Sharma
  • 4,688
  • 5
  • 35
  • 73
3

Use NVM to downgrade your node version - 99% of these errors are coming from a version clash between node-sass supported node versions and what you are running on your system. It's still a frustrating one!

James Begg
  • 132
  • 3
1

I don't know if someone needs to see this npm rebuild node-sass would not work out of the box for some new versions of node like 15.X.X in my case, the fix for this is to downgrade the node version, in my case I downgraded to version 10.16.3, then I ran the npm rebuild node-sass command and the error does not show again

zahra zamani
  • 1,323
  • 10
  • 27
CaesarDon
  • 11
  • 3
1

I am running node -v 12.14.1 on MAC OS and got into this issue when tried to fix npm audit (npm audit fix). After this I got issue and same message. I haven't have option to get lower version of node to try some of suggestions on this page so I tried to re-install node-sass but that did not help. However, rebuilt dependencies did help.

I have removed node_modules folder, ran sudo npm install (newer Mac OS has some permission issues so do sudo) than npm rebuild node-sass and it resolved my build issue. I hope this helps someone too if other suggestions on this page did not.

StefaDesign
  • 929
  • 10
  • 19
0

So I got my answer by running ng serve instead of ng build - this told me which of my own source files actually contained the issue.

I resolved it by replacing the following imports:

@import '../../../../node_modules/@clr/ui/src/utils/helpers.clarity';
@import '../../../../node_modules/@clr/ui/src/color/utils/colors.clarity';
@import '../../../../node_modules/@clr/ui/src/color/utils/contrast-cache.clarity';
@import '../../../../node_modules/@clr/ui/src/color/utils/helpers.clarity';
@import '../../../../node_modules/@clr/ui/src/utils/variables.clarity';

with hardcoded values:

$clr-header-height: 2.5rem;
$clr-near-white: #fafafa;
$clr-dark-gray: #565656;
$clr-light-gray: #eee;
Allan Bowe
  • 12,306
  • 19
  • 75
  • 124
  • Are you building a custom theme for your Clarity app? – hippeelee Jan 24 '19 at 22:58
  • 1
    I see. If you end up overriding a lot of the variables it might be easier to do it the way a custom theme can be built. Feel free to ping me if you have questions or issues. – hippeelee Jan 24 '19 at 23:04
  • thanks! The motivation here is purely to get a successful build following an angular update. This is my next issue: https://stackoverflow.com/questions/54356517/error-in-clr-icon-is-not-a-known-element – Allan Bowe Jan 24 '19 at 23:18
0

In my case I wasn't running (ng serve) from the root folder of my project. Moving to the root folder solved the issue for me.

MichaelEr
  • 75
  • 2
  • 8
0

In my case, I saw this error when we upgraded from Angular 9.x to 12.x. I had multiple versions of Node 12.2 and 12.14 (*). I kept getting this error till I uninstalled 12.2 and did npm install after.

Gayathri
  • 11
  • 1