css - @supports无法从SASS编译为CSS css-loader

在 Sass 中使用 @supports 嵌套时可能会遇到编译错误，原因是 Sass 中的 @supports 嵌套语法与 CSS 中略有不同，不能直接编译为 CSS。

解决这个问题的方法是使用 PostCSS 或 postcss-preset-env 插件将 @supports 嵌套语法转换为 CSS 中的 @supports 语法。具体的步骤如下：

1. 安装 PostCSS 或 postcss-preset-env 插件：

npm install postcss postcss-preset-env --save-dev

2. 在 webpack 配置文件中添加 PostCSS loader，并指定 postcss-preset-env 插件：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('postcss-preset-env')()
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

3. 在 Sass 中使用 @supports 嵌套语法：

@supports (display: flex) {
  .my-class {
    display: flex;
  }
}

4. 编译 Sass 文件，@supports 嵌套语法会被自动转换为 CSS 中的 @supports 语法：

@supports (display: flex) {
  .my-class {
    display: flex;
  }
}

通过这种方式，就可以在 Sass 中使用 @supports 嵌套语法，同时又能够将代码正确地编译为 CSS。