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

我尝试删除清除以查看它是否有效，但它只是给了我另一个错误：

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';