在 webpack 中从 cssnext 转换为 postcss-cssnext

Posted 2023-03-07

【中文标题】在 webpack 中从 cssnext 转换为 postcss-cssnext

【英文标题】：Converting from cssnext to postcss-cssnext in webpack

【发布时间】：2016-06-19 10:40:37

【问题描述】：

我无法将我的 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 配置

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 一起工作？

【问题讨论】：

您当前的配置只是多余的。如果您使用的是 cssnext-loader，那么您在 postcss-loader 中使用的插件只是重复的（嗯，cssnext 作为插件包含的 customMedia 和 autoprefixer 的重复，以及 cssnext-loader 也...）

因此，如果我想要自定义媒体、css 变量和自动前缀，我应该只使用 postcss-loader，就像我在第二个示例中一样，并且只使用 customProperties？如果是这样，我已经尝试了它以及其他一些配置（这里列出的太多了）。作为说明，我在主 css 文件中使用 @import 语句。这是参考我玩 postcss-import 的。

【参考方案1】：

首先，cssnext 和 postcss-cssnext 已经包含 postcss-custom-media、postcss-custom-properties 和 autoprefixer，如文档的 homepage 和 feature page 所述，因此您不需要包括所有这些。

如果您想要与以前使用 cssnext 完全相同的功能（我假设您使用的是 cssnext-loader），并且您正在使用 @import 语句（这是 cssnext 中包含的转换），您可以放心地将 cssnext 的 postcss-loader 示例获取到 postcss-cssnext 迁移指南。

【讨论】：

我意识到它们已经包含在内。我在第二个示例中的代码仅仅是使用配置的结果。我已经从 postcss-loader 中获取了示例，但是当我删除 cssnext-loader 时，变量不再起作用......所以我很难过。

我将其标记为正确。虽然用户可能想查看我的回答，这可能对一些人有所帮助。

【参考方案2】：

就我试图转换的三个主要函数而言，我已经找到了神奇的公式。我删除了我的 node_modules 目录。从 package.json 中删除了旧的 cssnext 和插件。将 postcss、postcss-loader、postcss-cssnext 和 postcss-import 添加到 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')
    ];

我现在有自动前缀、自定义媒体和变量。但是，它现在都在一个样式标签中。因此，在文件系统中定位一个特定的 css 块是一件很痛苦的事情……呃。

【讨论】：

这就是创建源地图的原因。