Конвертация cssnext в postcss-cssnext в webpack

У меня проблемы с преобразованием конфигурации моего веб-пакета с устаревших cssnext и cssnext-loader в postcss-cssnext и postcss-loader. Док четко заявляет, что функциональность, которую я пытаюсь воссоздать, была делегирована функциям определенных плагинов, но, похоже, я не могу заставить что-то работать. Один из примеров - переменные css.

Моя текущая рабочая конфигурация веб-пакета выглядит так:

... импорт плагина

var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var customMedia = require("postcss-custom-media");

... конфигурация загрузчика

module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader!cssnext-loader",
        include: path.join(__dirname, 'src')
    }]
},

... конфигурация postcss

postcss: function() {
    return [customMedia(), cssnext(), autoprefixer()];
}

Проблема:

Я заменил свой импорт cssnext, чтобы указать на новый модуль postcss-cssnext, и добавил в теперь необходимый модуль для обработки моих переменных css (postcss-custom-properties). Я также удалил cssnext-loader и предполагаю, что postcss-loader может справиться с этим ???

... импорт плагинов

var cssnext = require('postcss-cssnext');
var autoprefixer = require('autoprefixer');
var customMedia = require("postcss-custom-media");
var customProperties = require('postcss-custom-properties');

... конфигурация загрузчика

module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: path.join(__dirname, 'src')
    }]
},

... конфигурация postcss

postcss: function() {
    return [customMedia(), cssnext(), customProperties(), autoprefixer()];
}

Я вижу, что все мои стили отображаются на странице, но ни одна из переменных css не была оценена. Центральная проблема, похоже, связана с использованием "cssnext-loader". Если я добавлю его обратно, переменные будут работать. Я играл с postcss-import и различными итерациями конфигурации, но, похоже, ничего не работает. Кто-нибудь знает, что я делаю не так? Как я могу заставить работать вместе переменные postcss-cssnext, postcss-loader, css и webpack?


webpack postcss cssnext
person Kevin    schedule 05.03.2016    source источник
comment
Ваша текущая конфигурация просто избыточна. Если вы используете cssnext-loader, плагины, которые вы используете в postcss-loader, просто дубликаты (ну, трупликаты для customMedia и autoprefixer, которые включены cssnext в качестве плагина, а также cssnext-loader ...)   -  person MoOx    schedule 06.03.2016
comment
Поэтому, если мне нужны настраиваемые носители, переменные css и автоматический префикс, я должен использовать только postcss-loader, как и во втором примере, и только customProperties? Если да, то я уже пробовал это вместе с рядом других конфигураций (их слишком много, чтобы перечислять здесь). В качестве примечания я использую оператор @import в основном файле css. Это относится к моей игре с postcss-import.   -  person Kevin    schedule 06.03.2016

Ответы (2)


arrow_upward
3
arrow_downward

Прежде всего, cssnext и postcss-cssnext уже включают postcss-custom-media, postcss-custom-properties и autoprefixer, как сказано на домашней странице и страницу функций документации, поэтому вам не нужно включать все эти вещи .

Если вам нужны те же самые функции, что и у cssnext ранее (я предполагаю, что из того факта, что вы использовали cssnext-loader), и вы используете операторы @import (которые были преобразованием, включенным в cssnext), вы можете безопасно просто взять пример postcss-loader cssnext к руководству по миграции postcss-cssnext.

person MoOx    schedule 05.03.2016
comment
Я понимаю, что они уже включены. Мой код во втором примере был просто результатом игры с конфигурацией. Я взял пример из postcss-loader, но когда я удалил cssnext-loader, переменные больше не работают ... так что я в тупике. - person Kevin; 06.03.2016
comment
Я отмечаю это правильно. Хотя пользователи могут захотеть просмотреть мой ответ, который может некоторым помочь. - person Kevin; 06.03.2016

arrow_upward
1
arrow_downward

Что касается трех основных функций, которые я пытался преобразовать, я вычислил волшебную формулу. Я стер свой каталог node_modules. Удалены старые cssnext и плагины из package.json. Добавлены postcss, postcss-loader, postcss-cssnext и postcss-import в package.json и все переустановлено. Я думаю, что с самого начала у меня была правильная конфигурация, но мой каталог node_modules был в плохом состоянии из-за того, что я использовал npm uninstall.

Я использовал такую ​​конфигурацию загрузчика:

{
   test: /\.css$/,
   loader: "style-loader!css-loader!postcss-loader",
   include: path.join(__dirname, 'src')
}

и использовал следующую конфигурацию postcss:

postcss: function () {
    return [
        require("postcss-import")({ addDependencyTo: webpack }),
        require('postcss-cssnext')
    ];
}

Теперь у меня есть автоприставка, пользовательские носители и вары. НО, теперь это все в едином теге стиля. Поэтому обнаружение определенного блока css в файловой системе - это боль .... тьфу.

person Kevin    schedule 06.03.2016
comment
Вот почему были созданы исходные карты для. - person MoOx; 06.03.2016