How to connect styles from NPM into Quasar Cli component

[igor_local]

Hi everybody! I try to embed some NPM package , but got trouble with styles. How can i connect styles to my Quasar Cli component? Thank you

[s.molinari]

What does “got trouble with styles” mean? How did you embed that NPM package?

Scott

[igor_local]

@s-molinari styles are not loaded from the package. I installed the package according to the docs ‘npm i vue-scroll-picker’. So, i have this package in my package.json file. I also imported this in my component:

import { ScrollPicker, ScrollPickerGroup } from “vue-scroll-picker”

export default {
components: {
ScrollPicker,
ScrollPickerGroup,
}
})
so I only have HTML without styles

[s.molinari]

There is also an import needed for the CSS from what I can tell. Did you see that?

Scott

[igor_local]

@s-molinari yes, i tried to do that:
import “vue-scroll-picker/dist/style.css”

is not working

Of course, I pointed all the paths correctly, but it does not work

[s.molinari]

Unfortunately, I’ve never done this myself either, so no clue where to start looking. Maybe @metalsadman might have an idea.

Scott

[metalsadman]

@igor_local use the es6 one https://www.npmjs.com/package/vue-scroll-picker#es6., do it in a boot file https://quasar.dev/quasar-cli/cli-documentation/boot-files#Introduction
something like.

// boot/scroll-picker.js
import VueScrollPicker from "vue-scroll-picker"

export default ({ Vue }) => {
  Vue.use(VueScrollPicker)
}

if the styles isn’t working, you’ll probably have to set it in your quasar.conf.js, as shown here https://quasar.dev/quasar-cli/quasar-conf-js#css-Property.

p.s. i’ve not used this package…

[igor_local]

@metalsadman thank you, i tried this in all options, but doesn’t work

[metalsadman]

@igor_local just test it and this works here https://0ybb3.sse.codesandbox.io/quasar-third-party.
this is the content of the bootfile i used.

import 'vue-scroll-picker/dist/style.css'
import VueScrollPicker from 'vue-scroll-picker'

export default ({ Vue }) => {
  Vue.use(VueScrollPicker)
}

there’s some issue with the colors tho in the :root styles, since both this package and quasar is using it.

[igor_local]

@metalsadman doesn’t work!
here is my boot file (main.js in /src/boot/ dir:

// import something here

// "async" is optional
//export default async ({ /* app, router, Vue, ... */ }) => {
  // something to do
//}

import 'vue-scroll-picker/dist/style.css'
import VueScrollPicker from 'vue-scroll-picker'

export default ({ Vue }) => {
  Vue.use(VueScrollPicker)
}

here is the component ( i try with and without import style.css:

import "../../../node_modules/vue-scroll-picker/dist/style.css"
import { ScrollPicker, ScrollPickerGroup } from "vue-scroll-picker"
 
export default {
  components: {
    ScrollPicker,
    ScrollPickerGroup,
  },

this is quasar.conf.js:

module.exports = function (ctx) {
  return {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    boot: [
      'main.js'
    ],

    css: [
      'app.styl',
      '~vue-scroll-picker/dist/style.css'
    ],

What i did wrong?

[metalsadman]

@igor_local i just took this example https://wani.kr/vue-scroll-picker/#/.
better check the code here https://codesandbox.io/s/0ybb3. you don’t need to import the component once you registered it in your boot, you can use <scroll-picker /> <scroll-picker-group /> in your template.

[igor_local]

@metalsadman i found the problem - this is not working within a modal (not working means do not scrolling):

when I place this not in a modal window - everything works

ok! Thank you for your valuable help and support, i think i will find solution, probably I’ll make a modal window as a separate component. Then it should work!

[metalsadman]

@igor_local hmm updated my sandbox, still works in dialog https://codesandbox.io/s/0ybb3. nvm, it doesn’t scroll :x.

ok! Thank you for your valuable help and support, i think i will find solution, probably I’ll make a modal window as a separate component. Then it should work!

np, anyway hope you figure it out. goodluck.