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

Question

我将我的 1st 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内部，在模块导出之外，我添加了

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) || []
}
}

以及模块中的这段代码.export。

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