Nuxt Build Doesn't Include node_modules CSS - node.js

Question

Sorry I'm quite new to Nuxt & Webpack. I have a Nuxt project in which everything works fine running yarn dev. But when I build using yarn build -> yarn generate, the .css files I reference in the node_modules directory (dropzone.css, flatpickr.css etc) are never included and break the site. I've tried everything but can't figure out what I'm doing wrong. Can someone point me in the right direction? Currently running Nuxt v2.11.0 with Tailwind.css. This is my nuxt.config.js file which is mostly boilerplate -
require('dotenv').config()
export default {
env: {
baseUrl: process.env.BASE_URL || '/',
apiUrl: process.env.API_URL
},
mode: 'universal',
css: [
'#/assets/css/tailwind.css',
'#/assets/fonts/caslongraphique/webfont.css',
'#/assets/fonts/turbinadobolddry/font.css',
{ src: 'nuxt-dropzone/dropzone.css', lang: 'css' },
{ src: 'vue-agile/dist/VueAgile.css', lang: 'css' },
{ src: 'flatpickr/dist/flatpickr.css', lang: 'css' },
{ src: 'flatpickr/dist/themes/airbnb.css', lang: 'css' }
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~plugins/helpers' },
{ src: '~plugins/vue-moment' },
{ src: '~plugins/vue-agile', mode: 'client' },
{ src: '~plugins/eventBus', mode: 'client' },
{ src: '~plugins/axios', mode: 'client' },
{ src: '~plugins/vuex-persist', mode: 'client' }
],
buildModules: [
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'#nuxtjs/tailwindcss',
],
modules: [
'#nuxtjs/axios',
'#nuxtjs/dotenv',
// 'nuxt-client-init-module'
],
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
},
postcss: {
plugins: {
// Disable a plugin by passing false as value
'postcss-url': false,
'postcss-nested': {},
'autoprefixer': true
},
preset: {
// Change the postcss-preset-env settings
autoprefixer: {
grid: true
}
}
},
}
}

Answer 1

It's pretty hard to answer this without having the full project to build and run. I assume you're not using a separate webpack config file when building for production, otherwise you would have added that to the question. You seem to be using the correct syntax in the config file, so I'm guessing your css file paths are not quite right. They kinda look like the old way of doing things, you may want to confirm that they're not out of date. This old-ish github issue goes through the various things you could try, on of them being let nuxt find the "compiled" version of the css automatically for you like this:
css: [
'nuxt-dropzone',
...etc
],
Try removing all of the 3rd party css files and add them back one at a time, after the previous one works.
This example is from the official docs:
export default {
css: [
// Load a Node.js module directly (here it's a Sass file)
'bulma',
// CSS file in the project
'#/assets/css/main.css',
// SCSS file in the project
'#/assets/css/main.scss'
]
}