index.js

import avatar from "./avatar.jpeg";
import './index.scss'

const img = new Image();
img.src = avatar;
img.classList.add(avatar);
const root = document.getElementById("root");
root.append(img);

index.scss

@import './avator.scss';
body {
  .avatar {
    width: 250px;
    height: 250px;
    user-select: none;
  }
}

avatar.scss

body {
  p {
    user-select: none;
  }
}

webpack配置

{
  test: /\.scss$/,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        importLoaders: 2
      },
    },
    "sass-loader",
    "postcss-loader",
  ],
}

如下图，在 Safari 浏览器中 index.scss 的浏览器厂商后缀生效了，但是使用@import引入的scss文件没有生效，请问老师这是为什么呢？