Преобразование из cssnext в postcss-cssnext в webpack

Question

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

Мой текущий рабочий WebPack конфигурации, как так:

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

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 config

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

Проблема:

я сменил мой cssnext импорт, чтобы указать на новый модуль postcss-cssnext и добавил теперь требуется модуль для обработки моих CSS переменных (postcss-пользовательские свойства). Я также удалил cssnext-загрузчик и предполагаю, что 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 vars были оценены. Центральная проблема, похоже, связана с использованием «cssnext-loader». Если я добавлю его обратно, переменные будут работать. Я играл с postcss-импортом и различными итерациями конфигурации, но ничего не работает. Кто-нибудь знает, что я делаю неправильно? Как я могу получить переменные postcss-cssnext, postcss-loader, css и webpack для совместной работы?

Answer 1

Прежде всего cssnext и postcss-cssnext уже включают в себя postcss-пользовательских-медиа, postcss-пользовательских-свойства и autoprefixer, как сказал на homepage и feature page документации, так что вам не нужно включать все те, вещи.

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

Answer 2

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

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

{ 
    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') 
    ]; 
} 

теперь у меня есть autoprefixing, пользовательские средства массовой информации и ВАР. НО, теперь все в одном теге стиля. Поэтому размещение определенного блока css в файловой системе - это боль .... тьфу.