Angular modules are not taking global styles and scss variables

Question

In my angular app i have src/styles.scss

@import "./styles/fonts";
@import "./styles/variables.scss";

and in src/styls/variables.scss

$color-brand-darker: #2d323e;
$color-brand-dark: #0e2c6c;

and i have modules that are being loaded lazily. and this is how i am mentioning styles for a component in a module

@Component({
    selector: 'my-card',
    templateUrl: './my-card.component.html',
    styleUrls: ['./my-card.component.scss'],

and in angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "gothia": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/web.config",
                            "src/manifest.json"
                        ],
                        "styles": [
                            "src/styles.scss",
                            "node_modules/intro.js/introjs.css",
                            "node_modules/angular-calendar/css/angular-calendar.css"
                        ],
                        "scripts": [
                            "node_modules/intro.js/intro.js"
                        ]
                    },
                    "configurations": {
                        "development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "sourceMap": true,
                            "namedChunks": true
                        },
                        "production" : {}

in the options i have mentioned the styles as well but on build using this comamnd

"build": "ng build --configuration production",

showing me the error

./src/app/pages/my-view/components/my-card/my-card.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
   ╷
30 │         border-left: 5px solid $color-brand-darker;
   │                                ^^^^^^^^^^^^^^^^^^^^^^^

am i missing something?

my styles.scss is mentioned in angular.json and making this as global styles!!

so every module shuld have access to access these variables without importing in each component level scss for modules

package json versions

"sass-loader": "13.3.2",
"devDependencies": {
        "@angular-devkit/build-angular": "16.2.14",
        "@angular-devkit/schematics": "^16.0.1",

"@angular-material-components/datetime-picker": "16.0.1",
        "@angular/animations": "16.0.0",
        "@angular/cdk": "16.0.0",
        "@angular/common": "16.0.0",
        "@angular/compiler": "16.0.0",
        "@angular/core": "16.0.0",

tony · Accepted Answer · 2024-05-30 11:51:31Z

1

I dont think you can do that, global variables have to be wrapped in root {}

As far as i know this is the only way relative close

variables.scss

$colors: (
  brand-darker: #2d323e,
  brand-dark: #0e2c6c,
);

:root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
  }
}

styles.scss

@import './styles/variables';

NOTE: you can simplyfy import if you add below configuation under architect>build>options in angular.json

"stylePreprocessorOptions": {
  "includePaths": [
     "src/styles"
  ]
}

you will be able to import by typing @import 'variables';

Now use variable wherever it is with

color: var(--color-brand-darker);

edited May 30, 2024 at 11:51

answered May 30, 2024 at 11:33

tony

9655 silver badges13 bronze badges

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

6 Comments

Code Guru Over a year ago

so this is only for scss variables? and for @mixin? otherwise normal scss class rules will be shared as it?

tony Over a year ago

@SunilGarg you can't even do this when it comes to mixins. There is no way to provide global access to mixins, each file that uses them, has to import mixin file

tony Over a year ago

@SunilGarg yes. The only thing you can globally apply is plain css/scss. Everything that comes with inner context like, mixins, functions, etc... can't be provided globally

Code Guru Over a year ago

so files for mixin i need to import in every scss file ?

tony Over a year ago

Strictly speaking yes, you have to import them in every scss file, because sass itself does not allow it otherwise. But there can be external solution to your problem, for example webpack, using webpack you will be able to globalize both variables and mixins or whatever you want. Although behind the scene webpack will do the same import in all the files, just like you would have done.

|

Andrei · Accepted Answer · 2024-05-30 09:22:13Z

0

It is year 2024 and I guess it would be easier to use css variables instead of scss ones today:

 // src/styls/variables.scss
html {
  --color-brand-darker: #2d323e;
  --color-brand-dark: #0e2c6c;
}
// my-card.component.scss

border-left: 5px solid var(--color-brand-darker);

all modern browsers today support css variables. scss ones should be used only for libraries that depend on something scss specific or in some cases where you need to perform some maths on css values such as mixing colors or calculating angles/coordinates. support for different calculations is also coming but not everything is supported by all browsers yet.

answered May 30, 2024 at 9:22

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

6 Comments

Code Guru Over a year ago

yes, css variables can be used, but it should work , scss varaibles, the way i am using

Code Guru Over a year ago

and its not about only variables, i have other shared mixins as well

Andrei Over a year ago

then it seems you have to import your file with variables into the every file where variables(mixins) are used

Code Guru Over a year ago

but ideally it should work without import due to global rules?

Andrei Over a year ago

it is resolved by scss compiler. these variables don't exist in runtime

|

Mohammad Reza Mrg · Accepted Answer · 2024-05-30 13:06:55Z

0

Use variable.scss instead of import in style.scss

@use 'variables' as global;

Add variable.scss path to your angular.json file, Inside of styles block (in build config and not test config block), For styles like thems color add define colors like this: (:root{--app-primary-color: #red})

"styles": [
          "src/styles/variables.scss",
          "src/styles/styles.scss",
          ...
        ],

Inside of your my-card.component.scss use variables:

@use 'variables' as global;

.my-class {
    border-left: 5px solid global.$color-brand-darker;
    color: --app-primary-color;  // <---- for thems
}

edited May 30, 2024 at 13:06

answered May 30, 2024 at 10:39

Mohammad Reza Mrg

2,05319 silver badges36 bronze badges

4 Comments

Code Guru Over a year ago

i used first approach like @use "styles/variables" as global; and it did not work, or we need to mention in angular.json as well?

Mohammad Reza Mrg Over a year ago

Add it to angular.json file and re-run the app

Code Guru Over a year ago

i tried but did not work

Mohammad Reza Mrg Over a year ago

Check your path spell, you write src/styls/variables.scss that seems styls is not currect. also check the file name inside of angular.json. add your new angular.json file in your post

Collectives™ on Stack Overflow

Angular modules are not taking global styles and scss variables

3 Answers 3

variables.scss

styles.scss

Now use variable wherever it is with

6 Comments

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

variables.scss

styles.scss

Now use variable wherever it is with

6 Comments

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related