0

我希望这对你们来说是一个简单的问题:(。我通过安装“container-query-polyfill”来使用容器查询时遇到问题。当然，我从 Chrome 启用了 css 容器查询标志。在我的容器（父）类中，我添加了包含：内联大小；并且为了响应性，我为子类添加了@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 中使用容器查询、语法错误或其他原因的问题。请帮我解决这个问题。谢谢

4

0 回答 0