从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 (将#修改为@）