如何解决从postcss-cssnext迁移到postcss-preset-env无效
自postcss-cssnext
起已弃用,我将按照这些说明https://moox.io/blog/deprecating-cssnext/迁移到postcss-preset-env
(使用webpack)。
这样做会破坏我的风格。我尝试了各种各样的变化,但完全陷入困境。
我使用的是postcss-cssnext v 3.1.0
package.json
...
"postcss-cssnext": "3.1.0","postcss-easings": "1.0.1","postcss-for": "2.1.1","postcss-import": "11.1.0","postcss-loader": "2.1.5","postcss-mixins": "6.2.0","postcss-preset-env": "6.6.0","postcss-simple-vars": "4.1.0"
},"engines": {
"node": "~8.14"
},
webpack配置
# require postcss config
...
{
test: /\.pcss$/,use: [
MiniCssExtractPlugin.loader,{ loader: 'css-loader' },{
loader: 'postcss-loader',options: { plugins: () => postcssConfig.plugins },},],
postcss配置
const importAt = require('postcss-import');
const cssnext = require('postcss-cssnext');
const mixins = require('postcss-mixins');
const postcssFor = require('postcss-for');
const simpleVars = require('postcss-simple-vars');
const easings = require('postcss-easings');
const variables = require('./css-vars');
const extensions = require('./css-media');
module.exports = {
plugins: [
importAt,mixins,postcssFor,simpleVars({ variables }),easings,cssnext({
features: {
customProperties: {
preserve: true,customMedia: { extensions },}),};
使用postcss-preset-env
const importAt = require('postcss-import');
const mixins = require('postcss-mixins');
const postcssFor = require('postcss-for');
const simpleVars = require('postcss-simple-vars');
const easings = require('postcss-easings');
const presetEnv = require('postcss-preset-env');
const variables = require('./css-vars');
const extensions = require('./css-media');
module.exports = {
plugins: [
importAt,presetEnv({
stage: 2,features: {
'custom-media-queries': { extensions },'custom-properties': {
preserve: true,};
我在做什么错了?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。