英文:
Nuxt.js app deployed to Heroku only has TailwindCSS's styles for < SM breakpoint
问题
我将我的第一个Nuxt.js应用部署到Heroku... 一切都很顺利，但当我打开应用程序时，我意识到每个.vue文件/组件在SM断点之前都具有TailwindCSS样式。 移动视图很好，但大于SM断点的任何内容都不适用。 我还使用了Purgecss来删除未使用的样式，但不确定是否会导致问题... 有关如何修复这个问题的任何想法吗？
英文:
I deployed my 1st Nuxt.js app to Heroku...Everything went smooth but when I opened the app I realised that every .vue file/component has TailwindCSS styles up untill SM breakpoint. Mobile view is fine, but anything bigger than SM breakpoint is not apllied. I also used Purgecss to remove unused styles but not sure if that can cause the problems... Any ideas on how to fix this?
答案1
得分: 0
我通过找到这个链接 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']
英文:
I fixed my problem just by finding this https://github.com/nuxt/nuxt.js/issues/2262
I created modules folder and added import-tailwind-config.js with the code:
module.exports = function () {const tailwindConfig = require('@nuxtjs/tailwindcss')this.options.env.tailwind = tailwindConfig}
And inside nuxt.config.js, outside of module.exports I added
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) || []}}
As well as this code inside of 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']
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论