Question

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

isTransitioning

和这样的postcss配置：

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

并且能够导入卡片列表＆＃39;进入我的组件。

但是，这似乎不起作用。我还没能在网上找到关于这类问题的任何内容。

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添加了resize事件，可以在元素

上切换这些类

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

1 个答案: