CODEWITHSUNDEEP
cssvue.jsdependenciesquill
Christian
Christian

Reputation: 1853

Is there a better way to include CSS files installed by npm?

I'm using the Quill WYSIWYG editor in a Vue project that I'm working on.

I've installed quill via npm install [email protected]. Files are installed to node_modules/quill/.

When importing the JavaScript I do import Quill from 'quill' in the component that needs it, but in order to include the CSS I have a section in my Vue component like this:

<style scoped>
    @import '../node_modules/quill/dist/quill.snow.css'
</style>

This works fine for me - but I'm not sure that this is the best way to include these files/if there is a better way. Is there a better way? I wasn't sure if accessing them through the node_modules directory is the "professional" way to do this or if there are any issues with this approach

Upvotes: 2

Views: 1617

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

This is the correct approach, however you can usually omit node_modules from the path because Webpack will search this path by default (unless you have configured it otherwise):

<style scoped>
    @import 'quill/dist/quill.snow.css'
</style>

Alternatively you can import the CSS in JavaScript code like you would any other module:

<script>
    import 'quill/dist/quill.snow.css'
</script>

If you import it this way, then you can be sure that the CSS will be bundled only once, whereas I don't think importing it in CSS will de-dupe the styles if you import it in multiple CSS files in your project (but in your use-case this may not be an issue).

Upvotes: 6

Related Questions