how to import/link to a local css stylesheet file in app.vue

Question

im working with Java, Javalin and vue.

I cant figure out how to get css working without just having it all in-line within the tags in my app.vue.

so i dont want:

<style lang="css">

//lots

//of

//lines

//here

</style>

what i found while searching, was people doing things like this:

<style scoped src="/assets/styles/styles.css"></style>

or

<style scoped lang="css">
  @import "~/assets/styles.css";
</style>

these would be great. but it did not work for me somehow.

im very much an über noob with intellij and java, i mostly do web-dev frontend stuff in vim. but for this project its all intelliJ. i just hate working on giant long files. when i could split it up in more files. so if anyone have a super simple way of of just linking it. that would be amazing. :)

Answer 1

My jte template couldn't see css file. To solve this problem I configured app like this:

    Javalin app = Javalin.create(javalinConfig -> {
        javalinConfig.staticFiles.add("/static");// static is foder in resources
    }).start(7070);

and then linked css file in jte template using path to this file in static file folder:

    <link rel="stylesheet" type="text/css" href="index.css">

P.S. Maybe there are better solutions, but this one worked for me