Дублирование селекторов в инсперкторе при сборке Webpack

При разработке, заметил в девтулзах что стили, примененные к селекторам дублируются (перекрывают друг-друга). введите сюда описание изображения

Использую препроцессор sass, собираю все стили в dist/style.css

      {
    test: /\.s(a|c)ss$/,
    exclude: /node_modules/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: {
            localIdentName: "[name]__[local]--[hash:base64:5]",
          },
        },
      },
      "postcss-loader",
      "sass-loader",
    ],
  },

Есть общие файлы _variables.scss _mixins.scss forward.scss.

Пример _variables.scss

$mainBlack: rgb(37, 37, 37);
$mainGray: #394551;

Пример _mixins.scss

@mixin wrapper-outer {
 padding-top: 50px;
 padding-left: 70px;
 padding-right: 70px;
}

Использую forward.scss как точку для эскпорта во внешние компоненты.

@forward 'mixins';
@forward 'variables';

Пример использования в Header.module.scss:

@use "../../styles/forwarded.scss";
.header_inner_block {
 max-width: 1140px;
 @include forwarded.display-flex();
 margin: 0 auto;
 color: forwarded.$mainBlack;
}

Ответы (0 шт):