Как применяются настроенные плагины `postcss-import`

Я только начал использовать PostCSS исключительно с Webpack. При использовании postcss-import для встроенных внешних таблиц стилей я вижу, что его параметры позволяют нам настраивать плагины и преобразователи для применения к импортированным источникам, но я немного смущен тем, как это сочетается с другими параметрами, настроенными для основного исполнителя PostCSS.

Например, если я хочу встроить URL-адреса, должен ли я добавлять плагин postcss-url к postcss-import, исполнителю PostCSS или обоим (если в моей основной таблице стилей также есть ссылки на URL)?


webpack css postcss
person Filip Dupanović    schedule 30.07.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Рекомендуется сделать postcss-import первым плагином в вашем списке, когда вы определяете плагины для postcss в webpack. Поскольку postcss-import просто встраивает @import в начало файла, к нему будет применяться любой плагин postcss, определенный впоследствии.

Пример:

(Для примера я предполагаю, что вы используете файл postcss.config.js, та же логика применяется, если вы используете массив для плагинов в формате webpack 1)

// Header.css
@import 'button.css';

.foo {
    font-size: 3rem;
    transform:translateY(-10px);
}

// Button.css

.bar {
   transform:translateX(20px);
}

Если плагин импорта находится за автопрефиксером, он сначала применит плагин автопрефиксера к файлу, а затем импортирует файл @import. Таким образом, к тому времени, когда файл будет импортирован, префикс уже будет выполнен, вывод будет таким:

// postcss.config.js
module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-import': {}
  },
};

// output.css
.bar {
    transform: translateX(20px); // Prefixing hasn't happened on the imported file
}
.foo {
    font-size: 3rem;
    transform:translateY(-10px);
    -webkit-transform:translateY(-10px); // original file has been prefixed though
}

Однако, если вы поместите импорт первым, он встроит импортированный файл, а затем выполнит автопрефикс, это означает, что и импортированный, и исходный файл будут иметь автопрефикс:

// postcss.config.js
    module.exports = {
      plugins: {
        'postcss-import': {},
        'autoprefixer': {}
      },
    };

// output.css
.bar {
    transform: translateX(20px);
    -webkit-transform:translateX(20px); // Also prefixed now

}
.foo {
    font-size: 3rem;
    transform:translateY(-10px);
    -webkit-transform:translateY(-10px); 
}

Таким образом, это означает, что вам не нужно снова добавлять плагины в опции плагина postcss-import.

person siebe van dijck    schedule 02.03.2017