Nuxt.js 部署到 Heroku 的应用只有 < SM 断点的 TailwindCSS 样式

Question

我将我的第一个 Nuxt.js 应用程序部署到 Heroku...一切都很顺利，但是当我打开应用程序时，我意识到每个 .vue file/component 都有 TailwindCSS 样式，直到 SM 断点。移动视图很好，但任何大于 SM 断点的东西都不适用。我还使用 Purgecss 删除未使用的样式，但不确定这是否会导致问题...关于如何解决此问题的任何想法？

Answer 1

我通过找到这个 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'
  ]

Nuxt.js 部署到 Heroku 的应用只有 < SM 断点的 TailwindCSS 样式

Nuxt.js app deployed to Heroku only has TailwindCSS's styles for < SM breakpoint

heroku

nuxt.js

tailwind-css

css-purge