css missing when build by Nuxt.js

[mukiwu]

when I build the project by Nuxt.js

npm run build
npm start

and the css was missing:

I don't know what's happened...does anyone has any ideas? thanks!

[webistomin]

Can you show me the code where you register the plugin?

[mukiwu]

<template>
  <div class="container">
    <vue-tube v-bind="video">
      <template #thumbnail>
        <img :src="require('~/assets/img/application/' + applicationData.banner)" class="img-fluid vuetube-thumbnail" />
      </template>
      <template #icon>
        <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path class="vuetube__btn" d="M49.9999 91.6666C73.0118 91.6666 91.6666 73.0118 91.6666 49.9999C91.6666 26.9881 73.0118 8.33325 49.9999 8.33325C26.9881 8.33325 8.33325 26.9881 8.33325 49.9999C8.33325 73.0118 26.9881 91.6666 49.9999 91.6666Z" fill="white" fill-opacity="0.4" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
          <path class="vuetube__btn" d="M41.6667 33.3333L66.6668 49.9999L41.6667 66.6666V33.3333Z" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </template>
    </vue-tube>
  </div>
</template>

<script>
import { VueTube } from 'vuetube'
import 'vuetube/dist/vuetube.css'

export default {
  data() {
    return {
      video: {
        videoId: "dQw4w9WgXcQ"
      }
    }
  },
  components: { VueTube },
</script>

<style lang="scss" scoped>
.vuetube-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.vuetube:hover .vuetube__btn {
  transition: stroke-opacity 0.2s ease;
  stroke-opacity: .7;
}
</style>

thanks!

[webistomin]

It looks like something is cutting out styles from third-party libraries. Can you show the nuxt.congif.js file?

[mukiwu]

import webpack from 'webpack'

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    script: [
      {
        src: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js",
        type: "text/javascript"
      },
      {
        src:
          "https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js",
        type: "text/javascript"
      },
      {
        src:
          "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js",
        type: "text/javascript"
      }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    { src: '~assets/scss/app.scss', lang: 'scss' }
  ],
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,
  loading: '~/components/LoadingBar.vue',

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    // '@nuxtjs/eslint-module'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/i18n',
  ],
  router: {
    scrollBehavior(to, from, savedPosition) {
      if (to.hash) {
        let x = document.querySelector(to.hash) ? document.querySelector(to.hash).offsetTop : 20
        return window.scrollTo({
          top: x - 20,
          behavior: 'smooth'
        })
      }
      if (savedPosition) return savedPosition
      if (to.params.savedPosition) return {}
      // scroll to top by default
      return {x: 0, y: 0}
      // return window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  },

  i18n: {
    locales: ['tw', 'en'],
    defaultLocale: process.env.VUE_APP_I18N_LOCALE || 'tw',
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        '$': 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}

[webistomin]

It looks fine 😐. I made a small example of using this library in nuxt.

You can also make a small demo that does not work, so I can help.