Preferred way of importing CSS into an app

💻 Development
1

Sorry for the possibly trivial question:

what is the best way to import a CSS file into my project? I started with notestutorial and was able to get a nice application running, only it does not pull the /css/style.css file.

EDIT:
Documentation instructs to include CSS from a PHP template:
style('myapp', 'style'); // adds css/style.(s)css.

How is this done in a VUE app which does not start with a PHP template?

2

Note that SCSCC files aren’t supported natively anymore with Nextcloud 25 which will be released in October. So style('myapp', 'style') won’t work anymore with scss files.

If you are using vue to do your frontend (something I would recommend), then you have two choices:

Embed your scss/css in your components (recommanded)

<template>
   <div class="my-object">
   </div>
</template>

<style lang="scss" scoped>
   .my-object {}
</style>

This has the advantage of having your style property scopped in your components

Use a global scss file and import it into your js

// mystyle.scss
.my-rule {}

and then in your entry point import the files, webpack will then take care of the rest

// main.js

import './mystyle.scss';

In both cases, you won’t need to use style() in your php template but just make sure the js files are imported

Edit: fix typo scopped → scoped

1 Like
3

Thanks Carl, that did it for me.

Followup question: I understand the adverb is ‘scoped’; is the keyword ‘scoped’ or ‘scopped’? I find evidence for both on the net and the compiler seems to eat both.

4

It should be scoped, at least this is that I see in the existing Nextcloud codebase