Unknown at rule @container scss(unknownAtRules)

I hope it would be a simple question for you guys :(. I have a problem using container query by installing "container-query-polyfill". Of course, I enabled css container query flag from Chrome. In my container(parent) class, I add contain: inline-size; and for responsiveness, I add @container for child class as following.

 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;
  }
 }
}
}

But it complains that container and @container is "Unknown at rule @container scss(unknownAtRules)". I check many tutorials, 100% of them use css, so I assumed that the problem might come from transforming scss to css. Since I am using Webpack, I did something like this

  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')],
            },
          },
        },
      ],
    },,
  ],
},

it didn't help at all. Now I am not sure if there is a problem coming from either using container query in scss, syntax error, or something else.

Recommended topics

Hot tags