CODEWITHSUNDEEP
cssreactjswebpacksasstsx
Ido
Ido

Reputation: 2054

SCSS !default with css-modules

I was about to ask it here but I found an answer while looking at the similar questions it's listed, so I'll answer myself hopefully will help others 🙃

It's about using the !default with SCSS. A simple usage would be:

Project A

_define.scss:

$text-color: #1c1c1c !default;
$button-background-color: deepskyblue !default;

core.scss:

@import "define";

html, body
{
    color: $text-color;
}

button.scss:

.button
{
    background-color: $button-background-color;
}

button.tsx: (using css-modules-typescript-loader)

import style from "./button.scss";

const Button = () => (
    <button className={style.button}></button>
);

Project B

_define_override.scss:

$text-color: #2c2c2c;
$button-background-color: tomato;

style.scss:

// Note that the override file is first.
@import "define_override";
@import "../Project A/core";

Now when using style.scss in Project B the _define_override.scss will override the text color of the Project A. But, it won't override the button's background color and this is because I'm using the css-modules.

Upvotes: 0

Views: 141

Answers (1)

Ido
Ido

Reputation: 2054

I fixed it using sass-resources-loader where I created in Project B a file e.g. named _define.scss which will have:

$text-color: #2c2c2c;
$button-background-color: tomato;

And added it to the loader:

{
    loader: "sass-resources-loader",
    options:
    {
        resources: path.resolve(PROJECT_ROOT, "src/theme/_define.scss")
    }
}

Upvotes: 1

Related Questions