[Feat] global variable.scss

🚀 feature request

Relevant Package

This feature request is for @angular/….


With global variable.scss we do not need to import variable file on each component scss file. I know VAR is well supported in latest browser except IE. We might do something for IE. With this feature it will become so easy to develop dark and light mode.

Describe the solution you’d like

We can have tooling to merge variable.scss variable all over place during ng serve and ng build. Like Ionic has variable.scss to add any global variable and access everywhere.

Describe alternatives you’ve considered

Have you considered any alternative solutions or workarounds?

1 possible answer(s) on “[Feat] global variable.scss

  1. Discussed this issue amongst the tooling team members. Consensus is that we don’t want to encourage use of global variables as a common design pattern for Angular apps. Global variables are generally considered an anti-pattern and create implicit dependencies within an application. There’s a lot of literature about the negative impact of globals as a programming construct which I won’t get into here. But from a concrete perspective in the Angular CLI, globals make tooling more complicated though a few means:

    • Globals must be included by default in a build, even though they are not directly referenced anywhere.
    • There is no easy way to track where a global variable came from through sourcemaps.
    • Building in watch mode is complicated because the global variables file does not appear in the dependency graph.
    • There is no easy/way to identify if/where a global variable is used. This can impact bundle size and performance, but also just general developer understanding and refactoring of the application.

    Our recommendation is to simply import the styles wherever they are needed. The relationship between the “global” styles and component styles are the same, but is explicitly declared in a much more traceable fashion which is easier for developers to understand and for tooling to process. Applications are free to add a global variables file if they choose to do so, but it isn’t something we want to directly support or encourage applications to do because of the negative impacts global variables can have on a codebase and the increased complexity of the infrastructure to support it.