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

Question

我将我的第一个 Nuxt.js 应用程序部署到 Heroku...一切都很顺利，但是当我打开应用程序时，我意识到每个 .vue 文件/组件都有 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'
  ]