PostCSS导入不导入@media查询中的文件

Posted 2023-03-06

【中文标题】PostCSS导入不导入@media查询中的文件

【英文标题】：PostCSS import not importing files inside @media query

【发布时间】：2018-04-17 10:18:07

【问题描述】：

我试图让 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 放到 import 之外，它就可以正常导入。%

@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");
);

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

【问题讨论】：

是否可以直接在你导入的css中添加媒体查询？

【参考方案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 也不错

【讨论】：

谢谢你，我在文档中完全错过了这个。按预期工作。

【参考方案2】：

问题是你不能在@media里面使用@import

@import CSS at-rule 用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外；由于它不是嵌套语句，@import 不能在条件组 at-rules 中使用。

Read Import

Read conditional group at-rules.

【参考方案3】：

进口洞察：

所有导入都在 js 中，css 应该在文件顶部声明。许多打包器都提出了相同的建议，因为编译器加载所需的依赖项是一个可扩展的想法。

捆绑以深度优先的方式进行。意思是，

如果我们有一个根文件，比如 index.js/styles.css，webpack（前端资产的典型捆绑器）会加载 index.js，如果有任何 webpack 加载器定义为匹配模式的文件，它将开始解析 /转译代码。

例如：styles.css 看起来像这样

@import "variables.css";

这里的 bundler 对 variables.css 应用相同的深度优先方法，这意味着它将开始解析 variable.css 并开始加载 varibles.css 中定义的第一个导入，这个过程一直持续到最深的导入并返回到变量的第二行variable.css 完成后的 .css 会回到根 styles.css / index.js。

然而，在 javascript 中可以有动态导入，因为提到的加载器（babel-loader、react-jsx 转换）实际上会在 NODE 层（A JS 编译器）转译和解析代码。

在哪里，

对于 css，在节点级别不进行任何处理，它捆绑并汇总 css 行。因此，此时系统不知道媒体查询。

【参考方案4】：

据我了解，@import 不能在@media 等内部使用。

根据https://developer.mozilla.org/en-US/docs/Web/CSS/@import，

@import 不能在条件组 at-rules 中使用。

三个条件组at规则是（根据https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules）：

@媒体，

@支持，

@文档

所以，只要保持@imports 和@medias 分开就可以了。 :)

@import "variables.css";

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

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

@media (--small-device)