I am currently working on creating a static website using my minimal code with Nuxt. This code includes integration of the tailwindcss toolkit and vue2-leaflet. When I run
nuxt generate
I end up with two CSS files - one for the tailwindcss styles and another for leaflet styles. However, the latter file is lacking most of the necessary CSS:
.leaflet-tile-pane{z-index:200}@-webkit-keyframes leaflet-gestures-fadein{to{opacity:1}}@keyframes leaflet-gestures-fadein{0%{opacity:0}to{opacity:1}}
This incomplete styling results in the map rendering incorrectly. Here's my current nuxt.config.js:
module.exports = {
mode: 'universal',
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
{ src: '~plugins/leaflet.js', mode: 'client' }
],
buildModules: [
'@nuxtjs/tailwindcss'
],
modules: ['@nuxtjs/apollo', 'nuxt-purgecss', ['nuxt-i18n', i18n]],
[...]
build: {
extractCSS: true,
}
}
Removing the extractCSS option pulls all relevant CSS into the index.html, but it triggers an error:
ERROR Webpack mode only works with build.extractCSS set to *true*. Either extract your CSS or use 'postcss' mode
I'm confused about how exactly CSS extraction functions. Can someone clarify why extractCSS: true isn't functioning as expected? How can I resolve this issue? Why does it work in SPA mode but not in static mode?