如何使用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

如下更新您的配置：

nullsLast

此外，我注意到您使用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'], }, ], }) ] } } 是故意还是错误？