Перезапись глобального стиля CSS в модулях не работает - PullRequest
Новая
       10

Перезапись глобального стиля CSS в модулях не работает

0 голосов
/ 19 мая 2018

У меня проблема с перезаписью стилей CSS с использованием компоновки в модулях.

Моя текущая настройка:

  • У меня есть файл библиотеки сторонней сетки, который я вставляюв мое приложение во входном файле JS: 

    import './css/thirdparty/file.css';

  • Я также использую модули CSS для своих компонентов, например: 

    import styles from './component.module.css';

const Component = () => {

// component code omitted

// in render
<div className={styles.col14}></div>
  • ВКонфигурация webpack, у меня есть два правила настройки для загрузки file.css с использованием простых файлов css-loader и *.module.css с использованием css-loader с модулями.

Все эти файлы загружены правильно, ивсе стили присутствуют.Вот проблема:

file.css содержит: 

.col-1-4 /* and all other col-1-* variations*/ {
    float: left;
    min-height: 1px;
    padding-right: 20px;
}

.col-1-4 {
    width: 25%;
}

component.module.css содержит: 

.col14 {
    composes: col-1-4 from global;
    padding-right: 0;
}

Токовый выход компонента: 

<div class="col14__3bA8W col-1-4">

Итак, стиль предположительно перезаписан, но в браузере я вижу, что padding-right по-прежнему 20px.Кажется, это происходит только тогда, когда я пытаюсь создать композицию из глобального стиля, потому что, если я создаю два класса из одного и того же компонента CSS-файла, он работает, как и ожидалось.

Кто-нибудь знает, почему это не работает?

1 Ответ

0 голосов
/ 19 мая 2018

Вы можете попробовать с 

.col14 {
  composes: col-1-4 from global;
  padding-right: 0!important;
}
...