Как настроить PurgeCSS для проектов vue-cli-3 с TailwindCSS? (включая адаптивные занятия) - PullRequest
Новая
       32

Как настроить PurgeCSS для проектов vue-cli-3 с TailwindCSS? (включая адаптивные занятия)

0 голосов
/ 22 января 2019

Я пытаюсь развернуть проект 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')
        ])
      })
    ]
  }
}

Где я должен поместить массив экстрактора?

1 Ответ

0 голосов
/ 29 января 2019

Обновите ваши конфигурации следующим образом: 

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' это было преднамеренно или по ошибке?

...