如何使用 webpack 使 SCSS 编译为 CSS？

Question

我有一个反应项目，并使用 SCSS 进行样式设置。 到目前为止，我在 Chrome Mac 中进行测试，甚至没有注意到 webpack 实际上并没有将 SCSS 文件编译成 CSS，因此它们保持不变。 但它工作正常。

尝试在 Firefox 上进行测试，它可以读取根级 styles，但不能读取嵌套的，例如：

.block {
  display:block;

  .row {
    display: flex;
  }
}

上面写着.block { display: block; } .block { display: block; } ，但不是.block.row { display: flex; } .block.row { display: flex; } 。

我的问题是如何让 sass-loader 实际将 SCSS 文件转换为 CSS？

这是我的 webpack 配置：

{
  entry: './src/index.tsx',
  output: {
    filename: `main.js`,
    path: '/dist',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                //Fast refresh enabled in local
                isLocal && 'react-refresh/babel',
              ].filter(Boolean),
            },
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: '/node_modules/',
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          //Creates `style` nodes from JS strings
          'style-loader',
          //Translates CSS into CommonJS
          'css-loader',
          //Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.mjs', '.d.ts'],
  },
}