webpack小说中的从“第二次”到“后”的转换

Question

我有困难，我的webpack配置从使用现在被废弃的cssnext和cssnext加载程序转换为postcss和postcss-加载器。Doc的状态很清楚，我试图重新创建的功能已经被委托给特定的插件，但是我似乎无法工作。其中一个例子是css变量。

我现在工作的webpack配置如下：

...plugin进口

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

...loader配置

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-定制-属性)。我还删除了cssnext-加载程序，并且假设后置加载程序可以处理一些事情？

...plugin进口

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

...loader配置

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-加载器”有关。如果我把它加回去，变量就会起作用。我确实玩过postcss导入和各种配置迭代，但似乎没有任何效果。有人知道我做错了什么吗？我怎样才能让postcss，postcss-加载器，css变量和webpack一起工作呢？

Answer 1

首先，cssnext和postcss已经包括postcss自定义媒体、postcss自定义属性和自动重定位器，就像文档的主页和特征页上所说的那样，所以您不需要包含所有这些内容。

如果您想要与以前使用cssnext的特性完全相同(我假设您使用的是cssnext加载器)，并且您使用的是@import语句(这是cssnext中包含的转换)，那么您可以安全地获取cssnext的后装载机示例，而不是postcss迁移指南。

Answer 2

就我试图转换的三个主要功能而言，我已经找到了神奇的公式。我删除了我的node_modules目录。从package.json中删除了旧的cssnext和插件。添加postcss，postcss-加载程序，postcss和postcss-导入到package.json并重新安装所有内容。我想我从一开始就有了正确的配置，但是由于我使用npm卸载，我的node_modules目录处于糟糕的状态。

我使用了以下加载程序配置：

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

我现在有自动修复，定制媒体和vars。但是，现在都是一个单一的样式标签了。因此，在文件系统中定位特定的css块是一个pain....ugh。