webpack - 使用 webpack css 模块进行容器查询

Question

我正在尝试在 webpack 项目中使用 css 容器查询和 css 模块。这个配置看起来像这样：

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

和这样的 postcss 配置：

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

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

但是，这似乎不起作用。我一直无法在网上找到有关此类问题的任何信息。

Answer 1

https://github.com/ausi/cq-prolyfill/blob/master/docs/usage.md
你应该添加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添加在元素上切换此类的调整大小事件