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

Вы проверили документацию?

Похоже, вы должны использовать

@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

Обзор импорта:

Все импортируемые файлы должны быть в формате js, css должен быть объявлен в верхней части файла. Многие компоновщики предлагают то же самое, поскольку для компилятора это масштабируемая идея загрузки требуемых зависимостей.

Объединение происходит в подходе глубины. Имею в виду,

Если у нас есть корневой файл скажем index.js / styles.css, веб-пакет (типичный пакет для внешних ресурсов) загружает index.js, если для файлов, соответствующих шаблону, определен какой-либо загрузчик веб-пакетов, он начнет анализировать / переносить код,

Пример: styles.css выглядит так

@import "variables.css";

Здесь упаковщик применяет тот же самый подход глубины к переменному. Css, то есть он начнет синтаксический анализ variable.css и загрузит первый импорт, определенный в varibles.css, и этот процесс продолжается до самого глубокого импорта и возвращается ко второй строке в variable.css после переменная.css завершена, она вернется в корневой каталог styles.css / index.js.

Однако в Javascript может быть динамический импорт, так как упомянутые загрузчики (babel-loader, response-jsx transform) будут на самом деле переносить и анализировать код на уровне NODE (JS-компилятор).

В то время как,

Для css не существует обработки, которая выполняется на уровне NODE, который она объединяет и суммирует по строке css. Таким образом, на данный момент медиа-запрос не известен для системы.

Answer 3

Проблема в том, что вы не можете использовать @import внутри @media

@Import CSS at-rule используется для импорта правил стилей из других таблиц стилей. Эти правила должны предшествовать всем другим типам правил, кроме правил @charset; поскольку это не вложенный оператор, @import нельзя использовать внутри условных групповых правил at-rules.

Читать импорт

Читайте условную группу по правилам.

Answer 4

Насколько я понимаю, @import нельзя использовать внутри @media или тому подобное.

Согласно https://developer.mozilla.org/en-US/docs/Web/CSS/@import,

@import нельзя использовать внутри условных групповых правил.

Три условные группы at-rules являются следующими (согласно https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule):

@средства массовой информации,

@supports,

@документ

Так что просто делайте то, что вы делали, сохраняя @imports и @medias раздельными, и все будет в порядке.:)

@import "variables.css";

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

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

@media (--small-device) {}