带有webpack css模块的容器查询

我试图在一个网页包项目中使用css容器查询和css模块。此配置如下所示：

loaders: [
  {
    test:   /\.css$/,
    loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
  }

const nested = require('postcss-nested');
const vars = require('postcss-simple-vars');
const autoprefixer = require('autoprefixer');
const containerQueries = require('cq-prolyfill/postcss-plugin');
module.exports = [
  containerQueries,
  vars({ variables: require('./src/common/vars') }),
  nested,
  autoprefixer
];

还有一个postss配置，如下所示：

loaders: [
  {
    test:   /\.css$/,
    loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
  }

const nested = require('postcss-nested');
const vars = require('postcss-simple-vars');
const autoprefixer = require('autoprefixer');
const containerQueries = require('cq-prolyfill/postcss-plugin');
module.exports = [
  containerQueries,
  vars({ variables: require('./src/common/vars') }),
  nested,
  autoprefixer
];

我希望能够让这门课发挥作用：

.card-list:container(width >= 100px) {
  color: yellow;
}

并且能够将“卡片列表”导入到我的组件中

然而，这似乎不起作用。我在网上找不到任何关于此类问题的信息。

您应该将

cq prolyfill.min.js

添加到包中。Postcss插件只将

：container

语法转换为有效的css选择器：

/* before */
.element:container(width >= 10px) {
    color: red;
}

/*after
.element.\:container\(width\>\=10px\) {
    color: red;
}

cq prolyfill.min.js

添加调整大小事件，在元素上切换此类