规则@container scss 未知(unknownAtRules)

Question

我希望这对你们来说是一个简单的问题:(。我通过安装“container-query-polyfill”使用容器查询时遇到问题。当然，我从 Chrome 中启用了 css 容器查询标志。在我的容器（父）类中，我添加 contains: inline-size; 并为了响应能力，我为子类添加 @container ，如下所示。

 div.model-holdings-advanced-module {
 container: inline-size;
 @container size(max-width: sizing.$standard-tablet) {
 .table-component-wrapper {
  overflow-x: scroll;
  table.table-component {
    tr > :first-child {
      position: -webkit-sticky;
      position: sticky;
      left: 0;
      z-index: 999;
  }
 }
}
}

但它抱怨容器和@container是“规则@container scss（unknownAtRules）未知”。我查了很多教程，100%都使用css，所以我认为问题可能来自于将scss转换为css。由于我使用的是Webpack，所以我做了这样的事情

  mode: 'production',
  module: {
  rules: [
    {
      test: /\.m?jsx?$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader',
      query: {
        presets: ['@babel/preset-env'], //Preset used for env setup
      },
    },
            {
      test: /\.s[ac]ss$/,
      use: [
        'raw-loader',
        {
          loader: 'sass-loader',
          options: {
            sassOptions: {
              includePaths: [path.resolve(__dirname, 'node_modules')],
            },
          },
        },
      ],
    },,
  ],
},

这根本没有帮助。现在我不确定是否有问题来自于在 scss 中使用容器查询、语法错误或其他原因。

Answer 1

我认为这是由于 sass linter 尚未使用 @container 规则的最新定义进行更新。这不是语法错误，只是所有浏览器尚未完全支持容器查询。

我认为你可以添加“scss.lint.unknownAtRules”：“忽略”。忽略此类消息

希望能帮助到你