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 changed. Processing...");

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 结构。在大多数情况下，将媒体查询包含在单独的文件中会使其他开发人员的支持变得极其复杂。

我最好的建议是使用短混入和 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原生也不错

Answer 2

问题是您不能使用 @import 和 @media

The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules.

Read Import

Read conditional group at-rules.

Answer 3

进口洞察力：

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

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

If we have a root file say index.js / styles.css, the webpack (typical bundler for front end assets) loads index.js if there is any webpack loader defined for the files matching the pattern it will start parsing / transpiling the code.

Ex: styles.css looks like this

@import "variables.css";

Here bundler applies same depth-first approach to variables.css, mean it would start parsing variable.css and start loading first import defined in varibles.css and this process goes on until deepest import and comes back to second line in variable.css after variable.css is completed it would come back to root styles.css / index.js.

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

其中，

For css, there is no processing that takes place at NODE level it bundles and sum's up the css line. So, at this point a media query is not known for the system.

Answer 4

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

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

@import cannot be used inside conditional group at-rules.

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

@media,

@supports,

@document

因此，只需将@imports 和@medias 分开，按照您之前的做法进行操作，应该没问题。 :)

@import "variables.css";

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

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

@media (--small-device) {}

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

PostCSS import not importing files inside @media query

css

postcss

postcss-import