在Webpack中从cssnext转换为postcss-cssnext


Converting from cssnext to postcss-cssnext in webpack

我无法将Webpack配置从使用现在不推荐使用的cssnext和cssnext-loader转换为postcss-cssnext和postcss-loader。 Doc清楚地指出，我尝试重新创建的功能已委派给特定功能的插件，但我似乎无法使事情正常进行。 CSS变量就是一个例子。

我当前正在使用的webpack配置如下：

...插件导入

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

...加载器配置

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

... postcss配置

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

问题：

我换掉了cssn??ext导入，以指向新的postcss-cssnext模块，并添加了现在需要的模块来处理我的css变量(postcss-custom-properties)。我还删除了cssn??ext-loader，并假设postcss-loader可以处理事情了？？？

...插件导入

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

...加载器配置

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

... postcss配置

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

我可以看到我的所有样式都已呈现到页面上，但是没有评估任何CSS变量。中心问题似乎与" cssnext-loader"的使用有关。如果重新添加，变量将起作用。
我确实玩过postcss-import和各种配置迭代，但似乎没有任何效果。有人对我在做什么错有任何想法吗？如何使postcss-cssnext，postcss-loader，css变量和webpack协同工作？

相关讨论

首先，cssnext和postcss-cssnext已包含postcss-custom-media，postcss-custom-properties和autoprefixer，如文档的首页和功能页面所述，因此您无需包括所有这些内容东西。

如果您想要与cssnext完全相同的功能(我假设您使用的是cssnext-loader)，并且您使用的是@import语句(cssnext中包含的转换)，您可以放心地将postscs-cssnext的postcss-loader示例转换为postcss-cssnext迁移指南。

相关讨论

至于我试图转换的三个主要功能，我已经弄清楚了神奇的公式。我删除了node_modules目录。从package.json中删除了旧的cssnext和插件。在package.json中添加了postcss，postcss-loader，postcss-cssnext和postcss-import并重新安装了所有内容。我认为我从一开始就具有正确的配置，但是由于使用npm install，我的node_modules目录处于错误状态。

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

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

并使用以下postcss配置：

1
2
3
4
5
6
postcss: function () {
    return [
        require("postcss-import")({ addDependencyTo: webpack }),
        require('postcss-cssnext')
    ];
}

我现在有了自动前缀，自定义媒体和var。但是，现在都在一个样式标签中了。因此，在文件系统中定位特定的css块是很痛苦的..ugh。

相关讨论