在 webpack 中从 cssnext 转换为 postcss-cssnext
Converting from cssnext to postcss-cssnext in webpack
我无法将我的 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-自定义属性)。我还删除了 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()];
}
我可以看到我的所有样式都被呈现到页面上,但是 none 的 css 变量已经过评估。中心问题似乎与 "cssnext-loader" 的使用有关。如果我重新添加它,变量就会起作用。
我确实玩过 postcss-import 和各种配置迭代,但似乎没有任何效果。有人知道我做错了什么吗?如何让 postcss-cssnext、postcss-loader、css 变量和 webpack 协同工作?
首先,cssnext 和 postcss-cssnext 已经包含了 postcss-custom-media、postcss-custom-properties 和 autoprefixer,如文档 homepage and the feature page 中所述,因此您无需包含所有这些。
如果您想要与之前使用 cssnext 时完全相同的功能(我假设您使用的是 cssnext-loader),并且您正在使用 @import
语句(这是一个包含的转换在 cssnext 中),您可以安全地获取 cssnext 的 postcss-loader 示例到 postcss-cssnext 迁移指南。
就我尝试转换的三个主要函数而言,我已经想出了神奇的公式。我删除了我的 node_modules 目录。从 package.json 中删除了旧的 cssnext 和插件。添加了 postcss、postcss-loader、postcss-cssnext 和 postcss-导入到 package.json 并重新安装所有内容。我认为我从一开始就有正确的配置,但是由于我使用了 npm uninstall,我的 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 块是一件很痛苦的事……呃。
我无法将我的 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-自定义属性)。我还删除了 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()];
}
我可以看到我的所有样式都被呈现到页面上,但是 none 的 css 变量已经过评估。中心问题似乎与 "cssnext-loader" 的使用有关。如果我重新添加它,变量就会起作用。 我确实玩过 postcss-import 和各种配置迭代,但似乎没有任何效果。有人知道我做错了什么吗?如何让 postcss-cssnext、postcss-loader、css 变量和 webpack 协同工作?
首先,cssnext 和 postcss-cssnext 已经包含了 postcss-custom-media、postcss-custom-properties 和 autoprefixer,如文档 homepage and the feature page 中所述,因此您无需包含所有这些。
如果您想要与之前使用 cssnext 时完全相同的功能(我假设您使用的是 cssnext-loader),并且您正在使用 @import
语句(这是一个包含的转换在 cssnext 中),您可以安全地获取 cssnext 的 postcss-loader 示例到 postcss-cssnext 迁移指南。
就我尝试转换的三个主要函数而言,我已经想出了神奇的公式。我删除了我的 node_modules 目录。从 package.json 中删除了旧的 cssnext 和插件。添加了 postcss、postcss-loader、postcss-cssnext 和 postcss-导入到 package.json 并重新安装所有内容。我认为我从一开始就有正确的配置,但是由于我使用了 npm uninstall,我的 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 块是一件很痛苦的事……呃。