S CSS! Default с css -модулями - PullRequest
Новая
       95

S CSS! Default с css -модулями

0 голосов
/ 03 мая 2020

Я собирался задать его здесь, но я нашел ответ, просматривая похожие вопросы, перечисленные в списке, поэтому я отвечу себе, надеюсь, поможет другим ?

Речь идет об использовании !default с S CSS. Простое использование будет:

Проект A

_define.s css: 

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

core.s css: 

@import "define";

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

button.s css: 

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

button.tsx: ( используя css -modules-typescript-загрузчик) 

import style from "./button.scss";

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

Проект B

_define_override.s css: 

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

style.s css: 

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

Теперь при использовании style.s css в проекте B _define_override.s css заменит цвет текста Project A. Но он не заменит цвет фона кнопки, потому что я использую css -модули .

1 Ответ

0 голосов
/ 03 мая 2020

Я исправил это с помощью sass-resources-loader , где я создал в Project B файл, например с именем _define.scss, который будет иметь: 

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

И добавил его в загрузчик : 

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