0

我试图让 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");
});

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

4

4 回答 4

1

你检查过文档吗？

看起来你应该使用

@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 也不错

于 2017-11-07T14:14:43.547 回答
0

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

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

读取导入

阅读条件组规则。

于 2017-11-07T14:23:23.613 回答
0

进口洞察：

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

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

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

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

@import "variables.css";

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

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

然而，

对于 css，没有在节点级别发生的处理，它捆绑并汇总 css 行。因此，此时系统不知道媒体查询。

于 2017-11-07T15:03:16.487 回答
0

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

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

@import 不能在条件组规则中使用。

三个条件组规则是（根据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) {}

于 2017-11-09T00:41:27.797 回答