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

Question

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"
        ]

github.com/vmware/clarity/blob/master/src/clr-angular/utils/… — Allan Bowe
– Allan Bowe, Commented Jan 24, 2019 at 21:02
what does clr-getColor(dark) return? It can't be a valid color because else u would't get these error, may a wrong format? — Atomzwieback
– Atomzwieback, Commented Jan 24, 2019 at 21:11

Saniya syed qureshi · Accepted Answer · 2019-07-03 06:55:32Z

32

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

npm rebuild node-sass

answered Jul 3, 2019 at 6:55

Saniya syed qureshi

3,1973 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gopala Raja Naika · Accepted Answer · 2020-01-21 05:13:50Z

11

npm install node-sass

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

answered Jan 21, 2020 at 5:13

Gopala Raja Naika

2,72928 silver badges18 bronze badges

Comments

Kingsley · Accepted Answer · 2019-12-23 05:12:05Z

4

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

answered Dec 23, 2019 at 5:12

Kingsley

637 bronze badges

Comments

Sunny Sharma · Accepted Answer · 2020-05-15 06:50:33Z

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)

answered May 15, 2020 at 6:50

Sunny Sharma

5,0045 gold badges41 silver badges76 bronze badges

1 Comment

Rhokai Over a year ago

Helped me after so much time wasting. Seems like never version can't do it correctly.

James Begg · Accepted Answer · 2020-09-10 09:10:56Z

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!

answered Sep 10, 2020 at 9:10

James Begg

1503 bronze badges

1 Comment

Deepak paramesh Over a year ago

I downgraded to 10.16.3, but still I was facing this issue.

zahra zamani · Accepted Answer · 2021-01-20 19:12:56Z

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

edited Jan 20, 2021 at 19:12

zahra zamani

1,38312 silver badges32 bronze badges

answered Jan 20, 2021 at 11:54

CaesarDon

215 bronze badges

Comments

StefaDesign · Accepted Answer · 2021-09-13 18:39:11Z

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.

answered Sep 13, 2021 at 18:39

StefaDesign

9571 gold badge10 silver badges20 bronze badges

Comments

Allan Bowe · Accepted Answer · 2019-01-24 21:48:05Z

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;

answered Jan 24, 2019 at 21:48

Allan Bowe

12.8k20 gold badges83 silver badges126 bronze badges

3 Comments

hippeelee Over a year ago

Are you building a custom theme for your Clarity app?

hippeelee Over a year ago

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.

Allan Bowe Over a year ago

thanks! The motivation here is purely to get a successful build following an angular update. This is my next issue: stackoverflow.com/questions/54356517/…

MichaelEr · Accepted Answer · 2020-12-16 20:51:25Z

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.

answered Dec 16, 2020 at 20:51

MichaelEr

952 silver badges8 bronze badges

Comments

Gayathri · Accepted Answer · 2021-09-14 13:37:56Z

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.

answered Sep 14, 2021 at 13:37

Gayathri

111 bronze badge

Collectives™ on Stack Overflow

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

10 Answers 10

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related