Блог

Главная - Вопросы по программированию - scss не обнаруживает идентификаторы и классы?

scss не обнаруживает идентификаторы и классы?

#html #sass #webpack-5

Вопрос:

Это очень редкая проблема, с которой я никогда раньше не сталкивался. На самом деле я только что настроил минимальный шаблон html-scss с помощью Webpack 5, но по какой-то причине применяю стили только к html и тегам тела. Идентификаторы и классы не распознаются, я понятия не имею, что происходит.

Вот мой HTML-код:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root">
      <nav>
        <ul>
          <li><a href="#">Site Map</a></li>
          <li><a href="#">Contact us</a></li>
          <li><a href="#">Locations</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#">FAQ'S</a></li>
          <li><a href="">عربى</a></li>
        </ul>
      </nav>
      <button>Log out amp;#9657;</button>
    </div>
  </body>
</html>

И вот мой индекс.scss:

 @import 'variables';
@import 'scaffolding';

_ variables.scss

 $font-size: 62.5%;
$font-family: verdana, helvetica, sans-serif;
$font-color: #76645d;
$white: #fff;
$turquoise: #199fd9;
$indigo: #283a97;
$orange: #f08429;
$light-gray: #f2f2f2;

$background-color: $light-gray;
$page-max-width: 95.2rem;
$page-min-width: 57.6rem;

_scaffolding.scss

 *,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: $font-size;
}

body {
  background: $background-color;
  color: $font-color;
  font-family: $font-family;
  line-height: 1.4;
}

#root {
  background-color: $white;
  max-width: $page-max-width;
  min-width: $page-min-width;
  height: auto;
  margin: auto;
}

В консоли Chrome отображаются только html и стили тела
, а корневого элемента #вообще нет.

Пожалуйста, помогите мне узнать, в чем проблема, стоящая за этим.

Спасибо!

Комментарии:

1. codepen.io/developersbeat/pen/oNWwXWP Ваш код работает. в вашем файле должна быть какая-то другая проблема. Возможно, вы неправильно подключили свой файл sass/scss

2. Наконец — то я смог решить эту проблему. Загрузчик css изменяет идентификаторы и имена классов, когда включена опция modules, поэтому вам нужно немного больше настроек, чтобы заставить его работать. Вот документы CSS-загрузчика => > github.com/webpack-contrib/css-loader/blob/master/…

Метки: