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'
  ]

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

1 个答案: