How to set variables in local sass files that override settings in general sass when using webpack loader

Question

I have a site that has a three underlying applications that uses many of the same components, but styles them slightly differently in each application.

So I have made a site styles that is imported using the sass loader in webpack

my path

const csspath = path.resolve(__dirname,  './src/styles/main.scss');

my loaders

{
   loader: 'sass-loader',
   options: {
    sourceMap: true
   }
},
{
    loader: 'sass-resources-loader',
    options: {
      resources: [csspath]
    }
}

inside of one of my sass files I have the following

$navBackground: $black;
$navForeground: $white;
$itemSize: 60px;

.NavHeader {
    position: sticky;
    top: 0;
    z-index: 1071;
    background-color: $navBackground;
    color: $navForeground;
    width: 100vw;
    height: $itemSize;
}

I also have some css I import inside of my components, like so

import './Header.style.scss';

If I put these variables into the header style

$navBackground: $black;
$navForeground: $white;

it compiles fine, but if I remove those variables from the global sass files and keep the variables just in my local Header.style.scss I get the error message

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

background-color: $navBackground;
                 ^
  Undefined variable: "$navBackground".
  in /Users/bryanrasmussen/projects/dc_frontend/src/styles/components/_header.scss (line 8, column 23)

I suppose the obvious problem is that the local sass files in the components are loaded with the sass-loaders loader, and the resources that are global and not tied to a component are loaded by sass-resources-loader, so these loaders don't know anything about each other. So the question is if they can be merged in some way, or anyway that the sass-resources-loader can know about the sass files loaded with the sass-loader?

user254694 user254694 · Accepted Answer · 2019-05-29T11:29:28

I found a solution that I do not like particularly much as being somewhat inelegant, but I will put it here anyway in case someone has the same problem.

In the components that need to reuse the styles, for example the header I do

import './Header.style.scss';

in the component, and in the sass I set the variables that are needed and import the reusable sass

$

navBackground: $black;
$navForeground: $white;
$userColor: $white;
$navItemColor: $white;
$currentSelectedEmphasizeColor: $green;
$hamburgerCloserColor: $white;
$burgerMenuBackground: $black;
$navMenuLinkColor: $white;

@import '../../../styles/components/header';

I remover the styles/components/header styles from the main loaded resource, so I still have the sass resource loader which gives the cross apps styles but anything that needs to be set in each individual app will have to load the reused component styles and set the variables locally so that no errors happen in the main.scss at compilation time.

How to set variables in local sass files that override settings in general sass when using webpack loader

1 Answers