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

Posted

技术标签:

【中文标题】Vue 组件 - 包含 Laravel 目录中的 css 文件【英文标题】:Vue component - include css file from Laravel directory 【发布时间】:2018-03-05 12:26:10 【问题描述】:

我正在我的 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>

但是我得到了同样的错误,但路径不同。

所以我现在有点迷茫。任何人都可以帮助我吗?

【问题讨论】:

【参考方案1】:

您需要将组件文件的相对路径放入项目中。我使用 sass,所以我使用 @import。不知道如何导入更少。但我向你展示了我是如何在 sass 中做到这一点的。

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

我的例子是 Sass。我相信你可以很容易地把它翻译成更少。

【讨论】:

以上是关于Vue 组件 - 包含 Laravel 目录中的 css 文件的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Nova 中的自定义 Vue 组件

vue 组件中的 Laravel 门授权

从 Laravel 中的 .env 获取 .data 到 Laravel Nova Card - vue 组件

Vue.js 组件中的 Laravel 路由链接?

如何将数组从 Laravel Blade 传递到 Laravel 6/Vue 2.6 中的 Vue 组件。*

是否可以将 Vue Admin (Bulma) 包含到 Laravel 中?