S CSS - @media анализируется правильно

Question

У меня есть следующий код в моих стилях.s css:

.nav-bottom {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-content: flex-end;
  width: auto;
  height: auto;
  position: fixed;
  z-index: 8;
  bottom: 0px;
  right: 0px;
  padding: 5px;
  margin: 0px;

  @media (max-width: 360px) {
    width: 320px;
  }
}

И вот что я вижу, когда проверяю элемент в chrome:

последняя, ​​но не менее важная часть моей webpack.config.js:

{
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            // This loader resolves url() and @imports inside CSS
            loader: 'css-loader',
          },
          {
            // Then we apply postCSS fixes like autoprefixer and minifying
            loader: 'postcss-loader',
          },
          {
            // First we transform SASS to standard CSS
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
          },
        ],
      },

Есть идеи, почему это происходит?

Answer 1

На снимке экрана показано, что на вашем веб-сайте используется файл S CSS, но он должен использовать файл CSS, созданный из этого файла S CSS. Поэтому, я думаю, вам нужно найти строку, где ваша таблица стилей связана в head и изменить ссылку на этот файл.

Answer 2

У вас плохая роль веб-пакета, отвечающая за стиль. В версии веб-пакета, которую вы показали, вы должны дважды повторить загрузчик 'css -loader'. Ниже у вас есть версия dev / prod.

test: /\.(css|sass|scss)$/,
  use: [
    mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        importLoaders: 2
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
  ],

Answer 3

Используйте ваш медиа-запрос ie отдельно от вас css класс. Теперь внутри вашего медиа-запроса ie вы можете снова написать различные стили, которые вы хотите для этих классов.

@media screen and (max-width: 360px) {
 .nav-bottom {
    width: 320px;
    }
}