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

Posted 2023-03-07

【中文标题】部署到 Heroku 的 Nuxt.js 应用程序只有 TailwindCSS 的 < SM 断点样式

【英文标题】：Nuxt.js app deployed to Heroku only has TailwindCSS's styles for < SM breakpoint

【发布时间】：2020-04-24 01:52:21

【问题描述】：

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

【问题讨论】：

您是否按照the tailwind docs 中的描述自定义了 purgecss ？您需要为提取器设置正则表达式以匹配不同的断点和它们使用的冒号。

我遵循了这个指南medium.com/notonlycss/how-to-remove-unused-css-ad67421794a7

我认为这与顺风无关，所以不会对顺风类例外。

嗯，是的……这实际上是有道理的。我将尝试遵循 TailwindCSS 的官方指南，看看它是否有效。

密钥位是defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []

【参考方案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'
  ]