8000 css missing when build by Nuxt.js · Issue #178 · webistomin/vuetube · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

css missing when build by Nuxt.js #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
mukiwu opened this issue Nov 22, 2021 · 5 comments
Open

css missing when build by Nuxt.js #178

mukiwu opened this issue Nov 22, 2021 · 5 comments

Comments

@mukiwu
Copy link
mukiwu commented Nov 22, 2021

when I build the project by Nuxt.js

npm run build
npm start

and the css was missing:

image

I don't know what's happened...does anyone has any ideas? thanks!
@webistomin
Copy link
Owner

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

@mukiwu
Copy link
Author
mukiwu commented Nov 22, 2021 •
edited
Loading 
<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
Copy link
Owner

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

@mukiwu
Copy link
Author
mukiwu commented Nov 22, 2021 
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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mukiwu @webistomin
0