Блог

У меня есть следующее 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 ?

import является ключевым словом, а не функцией, поэтому у него другой синтаксис. См.: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import

Так, например

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

становится

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