组件样式未在生产中应用-Vue

Posted 2023-02-22

【中文标题】组件样式未在生产中应用-Vue

【英文标题】：Component style not being applied in production -Vue

【发布时间】：2020-12-27 08:07:34

【问题描述】：

我有一个组件IndexHero.vue 应用了一个作用域样式

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

这在我正在开发npm run dev 时工作正常，但是当我生成静态构建npm run generate 时，元素上存在类名，但类不存在。

我见过类似这样的其他帖子使用::v-deep particles 和* >>> particles，但这对我来说并不成功。我也尝试过删除作用域，但这也不起作用。谁能指出我应用样式的方向？我也在使用 Nuxt v2.14.4

更新： 它如何显示在 DOM 树中。 canvas 元素是由 JS 库 tsparticles 插入的，顺便说一句。

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;
    
  ,

更新：

【问题讨论】：

@admcfajn 我删除了渐变，但没有任何乐趣

如果你删除除了最基本的样式之外的所有样式怎么办？这行得通吗？ .particles height: 100px; width: 100px; border: 2px dashed #f00

@admcfajn 不。我看到一个小红色虚线框正在开发中，但在生产中仍然没有

打开浏览器检查器，然后检查div#tsparticles是否有css class=particles。如果是，请检查 class=particles 中的属性是否启用。

请添加nuxt.config.js &/或webpack.config.js，这可能有助于找到问题的根源

【参考方案1】：

我以前使用过 TsParticles，但有时会出现问题。

您可以在 Vue.js / Nuxt.js 上的 TsParticles 的 github 上查看我的工作示例。

 <div id="tsparticles" class="particles"></div> 

根据我自己之前的挣扎，我建议你将你的 id 重命名为不同于 tsparticles 的名称，因为名称可能会在 javascript 上发生冲突（这发生在我身上）。