Javascript SCSS-@媒体已正确解析

我的styles.scss中有以下代码：

.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;
  }
}

这是我在检查铬元素时看到的：

最后但并非最不重要的是我的

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',
          },
        ],
      },

---

你知道为什么会发生这种情况吗？

在css类之外单独使用你的媒体查询。现在在你的媒体查询中，你可以再次为这些类编写你想要的不同样式

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

---

屏幕截图显示您的网站使用SCSS文件，但它应该使用从该SCSS文件生成的CSS文件。因此，我想您应该在

标题中查找样式表链接的那一行，并更改该文件引用。
您的网页角色对样式负责。在你展示的网页版本中，你必须重复加载程序两次“css加载程序”。下面是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,
      },
    },
  ],