vue-cli-3 - 如何使用 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')
        ])
      })
    ]
  }
}

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

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

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'的是故意还是错误的？