How use global scss variables in libs catalog?

[zlodiak]

I use nx on angular8. In apps folder exists styles.scss file. This file contains global scss-variable

$qwe: #F00

catalogs structure is follow:

apps
    bla
        src
            styles.scss
libs
    bla
        src
            lib
                comp
                    comp.scss
                    comp.html
                    comp.ts

Section build of angular.json contains follow setups:

.....
],
"styles": [
  "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
  "apps/bla/src/styles.scss"
],
"scripts": [
.......

But comp.scss is NOT have access to global scss-variable $qwe

// libs/bla/src/lib/comp/comp.scss
body {
  background: $qwe;
}

Console displays follow error message:

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

background: $qwe; ^ Undefined variable. ╷ 201 │ background: $qwe; │ ^^^^ ╵ stdin 201:15 root stylesheet

Please help me fix it or unerstand it.

[ahnpnl]

I think you need to import directly in your comp.scss using @import "styles.scss". I always have to import a sass file to be able to use something in it.

[jaysoo]

Hey, @ahnpnl is correct. The scss file with the variables need to be imported first.

I would also suggest creating another folder under libs to store the variables file (e.g. libs/shared/variables.scss). And then add an entry to .nxignore for libs/shared/variables.scss so workspace lint won't complain about the file not being in a project.

[zlodiak]

@ahnpnl thanks, but it is not comfortable for developers. Our project is very large, it has many nested components. Therefore import lines will be very long.

[zlodiak]

I would also suggest creating another folder under libs to store the variables file (e.g. libs/shared/variables.scss)

But it will be a code duplication. Because 'apps' will has styles, and 'libs' will has same styles)

[ahnpnl]

hi @zlodiak , actually the import line won't be long. I did this in my project

If you define your scss variables in angular.json (under stylePreprocessorOptions) you can have short import like the picture.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.