Vue 组件 - 包含 Laravel 目录中的 css 文件

Question

我正在 Laravel（测试）项目中的 Vue 中创建一个 1 文件组件。但是我对 css 使用较少，所以 css 部分在不同的文件中。现在我想包含这个文件但没有任何运气。我尝试查看堆栈溢出，但不确定是否搜索不正确或者我正在做一些我不应该做的事情。

Sitemap

我尝试做的是

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

我对图像使用相同的逻辑

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

但是当我这样做时 "npm run dev" 我得到 this error

所以我认为这可能会奏效：

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

但后来我得到了同样的错误，但路径不同。

所以我现在有点迷茫。谁能帮我解决这个问题？

Answer 1

您需要将组件文件的相对路径放入项目中。我用sass，所以我用@import。不确定如何导入更少。但我会在 sass 中向您展示我是如何做到的。

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

我的例子是Sass。我相信您可以轻松地将其翻译成更少。

Vue component - include css file from Laravel directory