如何使用 TailwindCSS 为 vue-cli-3 项目配置 PurgeCSS？（包括响应类）答案

【问题标题】：How to configure PurgeCSS for vue-cli-3 projects with TailwindCSS? (including responsive classes)如何使用 TailwindCSS 为 vue-cli-3 项目配置 PurgeCSS？（包括响应类）
【发布时间】：2019-06-15 10:30:27
【问题描述】：

我正在尝试部署一个 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')
        ])
      })
    ]
  }
}

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

【问题讨论】：

标签： vue-cli-3 tailwind-css css-purge

【解决方案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' 是故意还是错误？

【讨论】：