如何使用 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' 是有意还是无意？