title: Angular: Global Variables on Styles scss to share among all components
body: <p>I know this is a very asked question, but I can't seem to find the proper way of setting my project. In Angular 12, I'm trying to set a file of variables to share among all components without importing it in every scss file, and I'm trying to set it up in the styles.scss file, but it doesn't seem to be working properly. I'm getting an &quot;<strong>undefined variable</strong>&quot; error.</p>
  <p>My variables file:</p>
  <pre><code>$primary-color: #efefef;
  $light-color: #454758;
  $main-font:  #ACADB4;
  $main-font-regular: #6E707D;
  $main-font-light: #3c3c3c;
  $rich-black: #001011;
  $primary-white: #fafafa;
  </code></pre>
  <p>Here's how I'm importing it in styles.scss:</p>
  <pre><code>/* FONT AWESOME */
  @import &quot;~@fortawesome/fontawesome-free/scss/fontawesome.scss&quot;;
  @import &quot;~@fortawesome/fontawesome-free/scss/solid.scss&quot;;
  @import &quot;~@fortawesome/fontawesome-free/scss/regular.scss&quot;;
  @import &quot;~@fortawesome/fontawesome-free/scss/brands.scss&quot;;
  
  /* MDB CSS */
  @import &quot;~mdb-angular-ui-kit/assets/scss/mdb.scss&quot;;
  
  /* VARIABLES */
  @import &quot;styles/_variables.scss&quot;;
  </code></pre>
  <p>My angular.json file:</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;version&quot;: 1, 
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;CVWebPage&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;scss&quot;
          }
        },
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;app&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
            &quot;options&quot;: {
              &quot;outputPath&quot;: &quot;dist/CVWebPage&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;node_modules/bootstrap/dist/css/bootstrap.min.css&quot;, 
                &quot;src/styles.scss&quot;,
                &quot;src/styles/_variables.scss&quot;
              ],
              &quot;stylePreprocessorOptions&quot;: {
                &quot;includePaths&quot;: [
                  &quot;./src/styles&quot; 
                ]
              },
              &quot;scripts&quot;: [
                &quot;node_modules/jquery/dist/jquery.min.js&quot;,
                &quot;node_modules/popper.js/dist/umd/popper.js&quot;,
                &quot;node_modules/bootstrap/dist/js/bootstrap.min.js&quot;
              ],
              &quot;vendorChunk&quot;: true,
              &quot;extractLicenses&quot;: false,
              &quot;buildOptimizer&quot;: false,
              &quot;sourceMap&quot;: true,
              &quot;optimization&quot;: false,
              &quot;namedChunks&quot;: true
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;optimization&quot;: true,
                &quot;outputHashing&quot;: &quot;all&quot;,
                &quot;sourceMap&quot;: false,
                &quot;namedChunks&quot;: false,
                &quot;extractLicenses&quot;: true,
                &quot;vendorChunk&quot;: false,
                &quot;buildOptimizer&quot;: true,
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;2mb&quot;,
                    &quot;maximumError&quot;: &quot;5mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;6kb&quot;,
                    &quot;maximumError&quot;: &quot;10kb&quot;
                  }
                ]
              }
            },
            &quot;defaultConfiguration&quot;: &quot;&quot;
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;CVWebPage:build&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;CVWebPage:build:production&quot;
              }
            }
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;CVWebPage:build&quot;
            }
          },
          &quot;test&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
            &quot;options&quot;: {
              &quot;main&quot;: &quot;src/test.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
              &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;node_modules/bootstrap/dist/css/bootstrap.min.css&quot;,
                &quot;src/styles.scss&quot;,
                &quot;src/styles/_variables.scss&quot;
              ],
              &quot;scripts&quot;: [
                &quot;./node_modules/jquery/dist/jquery.slim.min.js&quot;,
                &quot;./node_modules/popper.js/dist/umd/popper.min.js&quot;,
                &quot;./node_modules/bootstrap/dist/js/bootstrap.min.js&quot;
              ]
            }
          },
          &quot;lint&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
            &quot;options&quot;: {
              &quot;tsConfig&quot;: [
                &quot;tsconfig.app.json&quot;,
                &quot;tsconfig.spec.json&quot;,
                &quot;e2e/tsconfig.json&quot;
              ],
              &quot;exclude&quot;: [
                &quot;**/node_modules/**&quot;
              ]
            }
          },
          &quot;e2e&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
            &quot;options&quot;: {
              &quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
              &quot;devServerTarget&quot;: &quot;CVWebPage:serve&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;devServerTarget&quot;: &quot;CVWebPage:serve:production&quot;
              }
            }
          }
        }
      }},
    &quot;defaultProject&quot;: &quot;CVWebPage&quot;
  }
  </code></pre>
  <p>And I'm just using it in a Component scss file like this:</p>
  <pre><code>color: $primary-white;
  </code></pre>
  <p>My project structure:</p>
  <p><a href="https://i.stack.imgur.com/vEyGP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vEyGP.png" alt="enter image description here" /></a></p>
  <p>I've tried doing the same this post does but couldn't make it work: <a href="https://stackoverflow.com/questions/43087236/how-to-use-global-scss-files-in-angular-cli-project">How to use global scss files in angular-cli project</a></p>
  <p>Thanks for the help!</p>