使用 webpack css 模块的容器查询

Container queries with webpack css modules

本文关键字：查询 模块 webpack css 使用      更新时间：2023-09-26

我正在尝试在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;
}

并且能够将"卡列表"导入我的组件。

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

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添加了调整大小事件，用于在元素上切换此类

相关文章：