CODEWITHSUNDEEP
angularvmware-claritysass-loader
Allan Bowe
Allan Bowe

Reputation: 12701

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

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

Upvotes: 16

Views: 77693

Answers (10)

Gayathri
Gayathri

Reputation: 11

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.

Upvotes: 0

StefaDesign
StefaDesign

Reputation: 959

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.

Upvotes: 1

CaesarDon
CaesarDon

Reputation: 21

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

Upvotes: 1

MichaelEr
MichaelEr

Reputation: 95

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.

Upvotes: 0

James Begg
James Begg

Reputation: 150

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!

Upvotes: 3

Sunny Sharma
Sunny Sharma

Reputation: 4934

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)

Upvotes: 3

Gopala Raja Naika
Gopala Raja Naika

Reputation: 2679

npm install node-sass

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

Upvotes: 11

Kingsley
Kingsley

Reputation: 63

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

Upvotes: 4

Saniya syed qureshi
Saniya syed qureshi

Reputation: 3177

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

npm rebuild node-sass

Upvotes: 31

Allan Bowe
Allan Bowe

Reputation: 12701

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;

Upvotes: 0

Related Questions