postcss.config 使用 import 而不是 require

Question

我有以下postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    tailwindcss("tailwind.config.js"),
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production'
      ? cssnano({ preset: 'default' })
      : null,
    require('postcss-discard-comments')(),
    require('postcss-discard-empty')(),
    purgecss({
      content: ['./dev/**/*.html', './src/**/*.ts'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

我试图隐藏它以使用 import 代替，因为它是我正在创建的 ES6 模块。

我尝试了以下方法：

const purgecss = import('@fullhuman/postcss-purgecss');
const cssnano = import('cssnano');
const tailwindcss = import('tailwindcss');
const autoprefixer = import('autoprefixer');
const discardComments = import('postcss-discard-comments');
const discardEmpty = import('postcss-discard-empty');
module.
  exports = {
  plugins: [
    tailwindcss,
    process.env.NODE_ENV === 'production' ? autoprefixer : null,
    process.env.NODE_ENV === 'production'
      ? cssnano({preset: 'default'})
      : null,
    discardComments,
    discardEmpty,
    purgecss({
      content: ['./dev/**/*.html', './src/**/*.ts'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
  ],
};

然后将文件名更改为 cjs 并将我的 tailwind.config 更改为相同的结尾，但是我一直收到错误消息：

TypeError: purgecss is not a function

我尝试删除 purge 以查看它是否有效，但它又给我一个错误：

TypeError: Invalid PostCSS Plugin found at: plugins[0]

如何正确更改为使用 import？

Answer 1

import 是关键字而不是函数，因此它具有不同的语法。参见：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import

所以，例如

const purgecss = require('@fullhuman/postcss-purgecss');

变成

import purgecss from '@fullhuman/postcss-purgecss';

postcss.config 使用 import 而不是 require

postcss.config with import instead of require

javascript

ecmascript-6

postcss