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（＆＃34; CSS已更改。正在处理...＆＃34;）;

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 native也很好

Answer 2

问题是您无法在@media

中使用

this.$$absUrl = appBaseNoFile + this.$$url.substr(1);

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

Read Import

Read conditional group at-rules.

Answer 3

进口洞察力：

所有导入都在js中，css应该在文件的顶部声明。许多捆绑包建议相同，因为它是一个可扩展的想法，以便加载所需的依赖关系。

捆绑发生在深度优先的方法中。意思是，

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

Ex：styles.css看起来像这样

@import "variables.css";

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

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

在哪里，

对于css，没有在NODE级别进行的处理它捆绑并且总结了css行。因此，此时系统不知道媒体查询。

Answer 4

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

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

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

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

@media，

@supports，

@document

所以，只要保持@imports和@medias分开就可以做你正在做的事情，你应该没问题。：）

＆＃13;

@import "variables.css";

h1 {font-family: var(--font-heading);}

@import "detailed/small/base.css";

@media (--small-device) {}

＆＃13;

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

4 个答案: