Component style not being applied in production -Vue - css

Question

I have a component IndexHero.vue that has a scoped style applied to it
<template>
<v-container fluid>
<div id="tsparticles" class="particles"></div>
<v-container
fill-height
class='mt-n16 fullheight pa-0'
>
<v-row justify="center">
<v-col cols='12' align='center'>
<h1 class=" mt-n16 display-1 font-weight-black">
HEADING
</h1>
</v-col>
</v-row>
</v-container>
</v-container>
</template>
<style scoped>
.particles {
height: 100px;
width: 100px;
border: 2px dashed #f00;
}
</style>
This works fine while I'm in development npm run dev but when I generate the static build npm run generate the class name is there on the element but the class just isn't there.
I've seen other posts like this use ::v-deep particles and * >>> particles but that has not been successful for me. I've also tried removing scoped but that didn't work either. Can anyone point me in the direction of getting the style applied? Also I'm using Nuxt v2.14.4
Update:
How it shows up in the DOM tree. The canvas element is inserted by a JS library tsparticles just btw.
nuxt.config.js
import colors from 'vuetify/es5/util/colors'
import {fireDb} from './plugins/firebase';
export default {
mode: 'universal',
target: 'static',
components: true,
render: {
fallback: false
},
//If you're debugging firebase cloud messaging notifications, comment off lines 10 and 11
//Those two lines exposes the Nuxt dev server on an IP so multiple devices can connect
//And debug across platforms/screen sizes
server: {
port: 8000, // default: 3000
host: '0.0.0.0', // default: localhost
},
/*
** Headers of the page
*/
head: {
title: 'COVID-19 in Trinidad and Tobago',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT." },
{ hid: 'theme-color', name: 'theme-color', content: '#121212'},
//Apple Related Tags
{ hid: 'apple-mobile-web-app-title', name: 'apple-mobile-web-app-title', content: 'CoronavirusInfoTT - Developer'},
{ hid: 'apple-mobile-web-app-status-bar-style', name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent'},
//Facebook Open Graph Tags
{ hid: 'og:url', property: 'og:url', content: 'https://developer.coronavirustt.info/'},
{ hid: 'og:title', property: 'og:title', content: 'CoronavirusInfoTT - Developer'},
{ hid: 'og:description', property: 'og:description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT."},
{ hid: 'og:site_name', property: 'og:site_name', content: 'developer.coronavirustt.info/'},
{ hid: 'og:image', property: 'og:image', content: 'https://developer.coronavirustt.info/tagimageversiontwo.png'},
{ hid: 'og:image:type', property: 'og:image:type', content: 'image/png'},
{ hid: 'og:image:height', property: 'og:image:height', content: '800'},
{ hid: 'og:image:width', property: 'og:image:width', content: '800'},
{ hid: 'og:image:alt', property: 'og:image:alt', content: 'A preview of the landing page'},
{ hid: 'og:type', property: 'og:type', content: 'website'},
//Twitter tags
{ hid: 'twitter:card', name: 'twitter:type', content: 'summary_large_image'},
{ hid: 'twitter:url', name: 'twitter:url', content: 'https://developer.coronavirustt.info/'},
{ hid: 'twitter:title', name: 'twitter:title', content: 'CoronavirusInfoTT- Developer'},
{ hid: 'twitter:description', name: 'twitter:description', content: "Information on this website is not real please do not use or take into consideration.This is the developer site for CoronavirusInfoTT."},
{ hid: 'twitter:image', name: 'twitter:image', content: 'https://developer.coronavirustt.info/tagimageversiontwo.png'},
{ hid: 'twitter:image:alt', name: 'twitter:image:alt', content: 'A preview of the landing page for the website'},
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
//{ rel: 'preload', as:'style', href: '../node_modules/#mdi/font/css/materialdesignicons.min.css' },
]
},
/*
** Customize the progress-bar color
*/
//loading: '#/components/WanderingCubes',
/*
** Global CSS
*/
css: [
'typeface-roboto/index.css',
'#mdi/font/css/materialdesignicons.min.css',
'#/assets/main.css',
],
/*
** Plugins to load before mounting the App
*/
plugins: [
'#/plugins/firebase.js',
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'#nuxtjs/vuetify',
'#nuxt/components',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/pwa',
'#nuxtjs/sitemap',
],
pwa: {
icon:{
sizes: [64, 120, 144, 152, 192, 384,512],
},
manifest:{
name: 'CoronavirusInfoTT',
short_name: 'COVID-19TT',
description: "Statistics and information about the COVID-19 virus in Trinidad and Tobago. See visualizations about the virus' activity regarding the number of cases, deaths and recoveries as well as reopening phases. It also acts as a hub for updates from the relevant authorities",
lang: 'en',
background_color: '#121212',
}
},
sitemap: {
hostname: 'https://coronavirustt.info',
gzip: true,
exclude: [
'/adminlogin',
'/admindashboard',
],
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
defaultAssets:false,
//treeShake: true,
theme: {
dark: true,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
extend (config, {isClient}) {
if (isClient){
config.optimization.splitChunks.maxSize = 200500;
}
}
*/
},
generate:{
//fallback: false,
async routes(){
const qs = await fireDb.collection('covid19tt/initiatives/initiatives').get();
let d = qs.docs.map(function(x){
let title = x.data().title;
if(title !== undefined){
title = title.toLowerCase().replace("'",'').replace(/ /g,'-');
let date = String( x.data().dateAdded);
let data = x.data();
data['dateAdded'] = date;
data['pageURL']= `https://coronavirustt.info/initiative/${data.urlTitle}/`;
return {
route: `/initiative/${x.data().urlTitle}/`,
payload: data,
};
}else{
return null;
}
});
d = d.filter( f=>{
if( f !== null) return f;}
)
return d;
}
},
}
Update:

Answer 1

I've worked with TsParticles before and it can be problematic sometimes.
You can check my working example on github of TsParticles on Vue.js / Nuxt.js.
<div id="tsparticles" class="particles"></div>
Based on my own previous strugles, I suggest you to rename your id to something different from tsparticles, as the names can collide on javascript (it happened to me).