CODEWITHSUNDEEP
angularsass
DLzer
DLzer

Reputation: 159

Angular 6 SCSS compile error from util.js

I'm just starting out with Angular 6, using the Angular CLI and getting familiar with the file structure. I intend on using SCSS to create a singular global stylesheet. However, when i compile i am receiving the error:

ERROR in ./src/app/top-bar/top-bar.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

// Copyright Joyent, Inc. and other Node contributors.
^
Invalid CSS after "...N THE SOFTWARE.": expected 1 selector or at- 
rule, was "var formatRegExp = "
in /Users/me/Documents/projects/node_modules/util/util.js 
(line 1, column 1)

My custom scss folder is located under src/assets/scss.

My top-bar component is located under src/app/top-bar.

I am trying to access src/assets/scss/app.scss in src/app/top-bar/top-bar.component.scss and receiving the above error.

I've tried numerous ways of importing the file @import "~/assets/scss/app.scss"; and @import "../assets/scss/app.scss"; to include the necessary variables but i cant be sure of what i'm doing wrong as the error seems vague and not pointed at any specific file besides a core angular utility.

If anyone can shed some light, even on the debugging process for such an error it would help immensely.

Upvotes: 1

Views: 1406

Answers (3)

user8204521
user8204521

Reputation: 1

Workaround for Angular7+ (unable to revert sass-loader version) & Foundation6+ & SASS combination:

Do not @import util/util from foundation in your .scss files but separated packages combination (breakpoint, color, direction, flex, math, mixins, selector, typography, unit, value), based on what you need or trick it with ./util/util. Also foundation.scss and settings.scss imports util inside them and so this files should be avoided or patched locally until sass-loader fix.

Upvotes: 0

Danail
Danail

Reputation: 2242

As pointed out by @crimbo the problem is in https://github.com/webpack-contrib/sass-loader/issues/556 , but I cannot rename files, because I use third party library ( Foundation 6 ).

I have downgraded to [email protected]

npm install --save-dev [email protected]

and it works for me for Angular 7.1.4 which used originally [email protected]

As per release notes https://github.com/webpack-contrib/sass-loader/releases/tag/v7.0.0 the breaking changes are:

  • Drop official node 4 support
  • This slightly changes the resolving algorithm. Should not break in normal usage, but might break in complex configurations.
  • The sass-loader throws an error at runtime now and refuses to compile if the peer dependency is wrong. This could break applications where npm's peer dependency warning was just ignored.

which are not problem for my case

Upvotes: 1

crimbo
crimbo

Reputation: 11251

I encountered the same problem. The root cause is a bug in the SCSS file loader/resolver used by webpack (used by the @angular/cli) that loads JS files in addition to SCSS files.

The bug is that JS files take precedence over SCSS files. The GitHub issue is here:

https://github.com/webpack-contrib/sass-loader/issues/556

The bad news is that the issue has been open for 8 months, and pull requests to fix it haven't been accepted.

The good news is that you can work around the problem by using SCSS file names that don't match JS filenames in node_modules subdirectories.

For example, I had a SCSS file named _util.scss, and so my error was:

  Invalid CSS after "...N THE SOFTWARE.": expected 1 selector or at-rule, was "var formatRegExp = "      
     in C:\src\project\node_modules\util\util.js (line 1, column 1)

My fix was to rename my SCSS file to _sass-util.scss. Hope that helps.

Upvotes: 1

Related Questions