Using Vue components to import a CSS file from a Laravel directory

Question

Using Vue components to import a CSS file from a Laravel directory

Currently, I am working on a 1-file component in Vue as part of my Laravel project for testing purposes. My CSS is written using Less and stored in a separate file. Despite my efforts, I have been unable to successfully include this file in my project. I have searched on Stack Overflow for answers, but I am unsure if I am looking in the right place or if I am making a mistake.

Sitemap

This is what I have attempted:

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

The same method was used for the image:

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

However, when running "npm run dev," I encounter this error.

I then tried this approach:

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

Unfortunately, this resulted in the same error message with a different path mentioned.

At this point, I am feeling a bit stuck. Is there anyone who can provide assistance with this issue?

css laravel vue.js less vuejs2

Answer 1

Answer №1

To file my component in the project, you must specify the relative path from your component file. I personally prefer using sass and utilize the @import function. If you are using less, the import method may differ but I can demonstrate how it's done with Sass.

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

My demonstration involves Sass, however adapting it for less should be straightforward.

Answer 2

To file my component in the project, you must specify the relative path from your component file. I personally prefer using sass and utilize the @import function. If you are using less, the import method may differ but I can demonstrate how it's done with Sass.

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

My demonstration involves Sass, however adapting it for less should be straightforward.

Using Vue components to import a CSS file from a Laravel directory

Answer №1

Similar questions

The HTML element update event was not triggered due to the excessive load of a JavaScript function

Dynamic content in CSS horizontal alignment

What is the best way to include arrays in VueJS?

When the canvas is dragged, an item within it suddenly leaps or bounces

Align multiple elements in a responsive fixed container

Challenges with implementing @Html.EditorForModel

Upgrading Pagination from Bootstrap 3 to Bootstrap 4: A Step-by-

Eliminate whitespace on the right side of a webpage using Bootstrap

Stylish Combobox with jQuery and CSS

Issue with CSS3 calc() validation: Invalid value provided for width, resulting in a parse error

The clash of interests between jQuery and Bootstrap

The HTML/JS output displays a table with missing horizontal borders

Does the downloading of images get affected when the CSS file has the disabled attribute?

Automatically set the margin for the initial element with flex-grow

Placing one image over another to create a layered effect

Need a place to store your mobile app data? Check out our hosting

What is the process for declaring global mixins and filters on a Vue class-based TypeScript component?

Ways to receive alerts when a marker enters a polygon

Tips for automatically resizing a canvas to fit the content within a scrollable container?

I am interested in implementing a CSS overlay on an image