1

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.

Improve this question
7
  • did you npm install node-sass ? did it go ok ? Commented Oct 22, 2018 at 16:56
  • Yes, no problems. I actually went with the SCSS option during creation of the app. Which gave me by base scss file. However i did attempt to install node-sass as well to see if that was the case. Commented Oct 22, 2018 at 16:58
  • // is invalid in CSS but its ok in SCSS your'e failing on that. this makes me think your SCSS is not compiling Commented Oct 22, 2018 at 17:00
  • I am aware. My problem is that with a typical SCSS error i would expect a point in the direction of the source. I've even tried a simple SCSS file with 2 rules and still get this fairly vague error. Commented Oct 22, 2018 at 17:03
  • can you add your angular.json file content Commented Oct 22, 2018 at 17:08

3 Answers 3

Reset to default
1

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.

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

Comments

1

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

Improve this answer

1 Comment

Good addition. Might want to change it to npm install --save-dev ... just to avoid adding a run-time dependency.
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.