Vue component - include css file from Laravel directory

Question

I am creating a 1 file component in Vue within my Laravel (test) project. But i use less for the css so the css part is in a different file. Now I want to include this file but without any luck. I try to look on stack overflow but am not sure if am searching incorrect or that I am doing something that I am not supposed to do.

Sitemap

What i try to do is

<style src="css/sidebar.css"></style>

I use the same logic for the image

<img class="flex-item" src="img/Home-icon.png">

But when i do "npm run dev" I get this error

So I thought this maybe wil work:

<style src="../public/css/sidebar.css"></style>

but then i get the same error but of cours with different path.

So I am a bit lost right now. Anyone that can help me with this?

EddyTheDove · Accepted Answer · 2017-09-24 13:59:41Z

4

You need to put the relative path from your component file in the project. I use sass, so I use @import. Not sure how to import in less. But I show you how I do it in sass.

// my-component.vue
<template></template>
<script></script>
<style lang="scss" scoped>
    @import "../../relative/path/to/file.scss";
</style>

My example is with Sass. I'm sure you can easily translate it to less.

answered Sep 24, 2017 at 13:59

EddyTheDove

13.2k2 gold badges40 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue component - include css file from Laravel directory

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related