如何使用TailwindCSS为vue-cli-3项目配置PurgeCSS？(包括响应类)

Question

我正在尝试部署一个vue-cli-3项目。我使用了TailwindCSS并创建了一个vue.config.js文件，它可以正常工作，但是没有包含响应类。我搜索了一个正则表达式，在webpack.config.js文件中使用了一个提取器，但它不起作用。我应该怎么做才能让它正常工作？

这是我的vue.config.js文件

const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')

module.exports = {
  configureWebpack: {
    // Merged into the final Webpack config
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, './src/index.html'),
          path.join(__dirname, './**/*.vue'),
          path.join(__dirname, './src/**/*.js')
        ])
      })
    ]
  }
}

我应该把提取器数组放在哪里？

Answer 1

按照以下步骤更新您的配置：

const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')

module.exports = {
  configureWebpack: {
    // Merged into the final Webpack config
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, './src/index.html'),
          path.join(__dirname, './src/**/*.vue'),
          path.join(__dirname, './src/**/*.js')
        ]),
        extractors: [
          {
            extractor: class TailwindExtractor {
              static extract(content) {
                return content.match(/[A-z0-9-_:\/]+/g) || [];
              }
            },
            extensions: ['html', 'vue', 'js'],
          },
        ],
      })
    ]
  }
}

另外，我注意到你使用'./**/*.vue'是故意的还是错误的？