SASS импортирует плохое поведение - PullRequest
Новая
       28

SASS импортирует плохое поведение

0 голосов
/ 05 марта 2020

Я только начал изучать S CSS, и я заметил, что что-то происходит с импортом партиалов в файл 'main.s css'. Я использую live-сервер для локального размещения сайта, и каждый раз, когда я что-то изменяю, простыми словами, это не работает. Он не отображается на веб-сайте, когда он автоматически обновляется в браузере. И теперь я вижу, что все мои стили исчезли, хотя все в моих файлах остается прежним.

  1. Это мой файл main.s css ниже. 
    // ABSTRACTS
    @use "abstracts/functions";
    @use "abstracts/mixins";
    @use "abstracts/variables";

    //PAGES 
    @use "pages/home";

    //COMPONENTS
    @use "components/button";

    //BASE
    @use "base/base";
    @use "base/animations";
    @use "base/utilities";
    @use "base/typography";

    //LAYOUTS
    @use "layouts/header";
    @use "layouts/grid";

Примечание: я также использовал @import для этого, но это то же самое.

Это мой фрагмент, который я пытаюсь изменить. 
    .row {
        max-width: $grid-width;
        background-color:yellow;
        margin: 0 auto;
        margin-bottom: $gutter-vertical;
    }

Что происходит, цвет фона не меняется. Это просто остается прежним. Это не проблема кода, так как я попробовал то же самое с кодом CSS внутри тега стиля. Поэтому я уверен, что это связано с импортом SASS.

1 Ответ

0 голосов
/ 05 марта 2020

Это может быть связано с рядом проблем:

  1. Элемент, который вы пытаетесь стилизовать, не имеет class="row" установленного.
  2. Вы не импортируете правое частичное. Невозможно сказать, что представляет собой каждый из импортируемых вами файлов.
  3. Что-то переопределяет стиль, который вы устанавливаете. Например, более конкретный c селектор (например, div.row) или что-то, использующее !important.

. Лучший способ проверить это - использовать инструменты разработчика для просмотра импортированной таблицы стилей. (конечно, убедитесь, что он есть) и найдите, можете ли вы найти правило, которое вы определили. Затем посмотрите на элемент, который вы пытаетесь стилизовать, и убедитесь, что он имеет имя класса row. Наконец, убедитесь, что ничто другое не применяет стиль, который переопределяет стиль, который вы ожидаете найти.

...