Приложение Nuxt. js, развернутое в Heroku, имеет только стили Tailwind CSS для <контрольной точки SM - PullRequest
Новая
       31

Приложение Nuxt. js, развернутое в Heroku, имеет только стили Tailwind CSS для <контрольной точки SM

0 голосов
/ 06 января 2020

Я развернул свое 1-е приложение Nuxt. js в Heroku ... Все прошло гладко, но когда я открыл приложение, я понял, что каждый. vue файл / компонент имеет стили Tailwind CSS до точки останова SM. Мобильный просмотр в порядке, но все, что больше точки останова SM, не применяется. Я также использовал Purge css для удаления неиспользуемых стилей, но не уверен, что это может вызвать проблемы ... Есть идеи, как это исправить?

1 Ответ

0 голосов
/ 06 января 2020

Я исправил свою проблему, просто найдя эту https://github.com/nuxt/nuxt.js/issues/2262

Я создал папку modules и добавил import-tailwind-config.js с кодом: 

module.exports = function () {
  const tailwindConfig = require('@nuxtjs/tailwindcss')
  this.options.env.tailwind = tailwindConfig
}

И внутри nuxt.config.js, за пределами module.exports, я добавил 

const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')

class TailwindExtractor {
  static extract (content) {
    return content.match(/[A-z0-9-:/]+/g) || []
  }
}

, а также этот код внутри module.exports 

build: {
    extend (config, ctx) {
      config.plugins.push(
        new PurgecssPlugin({
          whitelist: ['html', 'body'],
          paths: glob.sync([
            path.join(__dirname, 'components/**/*.vue'),
            path.join(__dirname, 'layouts/**/*.vue'),
            path.join(__dirname, 'pages/**/*.vue'),
            path.join(__dirname, 'plugins/**/*.vue')
          ]),
          extractors: [{
            extractor: TailwindExtractor,
            extensions: ['html', 'js', 'vue']
          }]
        })
      )
    }
  } 
  modules: [
    '~modules/import-tailwind-config'
  ]
...