css - PostCSS 导入不在@media 查询中导入文件

Question

我试图让 PostCSS 为不同的媒体查询导入不同的文件，但是没有执行带有媒体查询的导入。

其他导入工作正常，但其中的导入未导入。

例子

@import "variables.css";

h1 {font-family: var(--font-heading);}

@media (--small-device){
  @import "detailed/small/base.css";
}

@media (--medium-device){
    @import "detailed/medium/base.css";
}

@media (large-device){
    @import "detailed/large/base.css";
}

最终被处理成

h1 {font-family: Arial;} /* Variables imported fine */

@media (max-width: 600px){ /* postcss-custom-media working fine */
  @import "detailed/small/base.css"; /* why is this and the two below not imported? */
}

@media (max-width: 12600px){
    @import "detailed/medium/base.css";
}

@media (min-width: 1201px){
    @import "detailed/large/base.css";
}

如果我把进口带到进口之外，它进口很好。%}

@import "variables.css";

h1 {font-family: var(--font-heading);}

@import "detailed/small/base.css";

@media (--small-device) {}

结束为

h1 {font-family: Arial;}

.item {columns: 3} /* Imported base.css file, so paths are correct */

@media (max-width: 600px){}

我的 postcss 配置:

console.log("CSS 已更改。正在处理...");

var postcss = require('postcss');
var fs = require('fs');

var postcss_import = require('import-postcss');
var postcss_custom_media = require('postcss-custom-media');
var postcss_css_variables = require('postcss-css-variables');
var postcss_discard_comments = require('postcss-discard-comments');
var postcss_autoprefixer = require('autoprefixer');
var postcss_reporter = require('postcss-reporter');

var options = {
    from: 'css/style.css',
    to: 'postcsstest/static/css/style.css',
    map: { inline: true }
};

var css = fs.readFileSync("css/style.css", "utf8");

postcss([
    postcss_import,
    postcss_custom_media,
    postcss_css_variables,
    postcss_discard_comments,
    postcss_autoprefixer,
    postcss_reporter
])
.process(css, options)
.then(function (result) {
    fs.writeFileSync('postcsstest/static/css/style.css', result.css);
    console.log("CSS finished");
}, function(error) {
    console.log(error);
    console.log("CSS error");
});

报告的输出没有提到这一点(只有一些空的进口)。关于从媒体查询中导入，是否有我没有看到的插件或规则？

Answer 1

你检查过documentation了吗？ ？

看起来你应该使用

@import "detailed/small/base.css" (--small-device);

但是请考虑基于组件的 css 结构。在大多数情况下，将媒体查询包含在单独的文件中会使其他开发人员的支持变得极其复杂。

我最好的建议是使用简短的 mixins 和 sass 语法(使用 SugarSS )

=r($width)
  @media only screen and (max-width: $width+ "px")
    @content

=rmin($width)
  @media only screen and (min-width: $width+ "px")
    @content

所以，你可以使用

+r(--mobile)
  some: property

SCSS/postcss native 也不错