Php 如何从laravel后端仪表板中拆分vuejs组件的设计

我正在使用laravel应用程序将Vuejs组件渲染为blade laravel，它渲染该组件，但受laravel后端CSS设计的影响，因为我在后端部分预览该组件，我的问题是如何将Vuejs组件的CSS设计从laravel CSS设计后端拆分

header-component.vue

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  </div>
</template>
<style scoped>
  .container{
    width: 960px;
    margin:auto;
  }
</style>

<style>
    @import '/../frontend/css/all.css';
    @import '/../frontend/css/Animate.css';
    @import '/../frontend/css/bootstrap.min.css';
    @import '/../frontend/css/owl.carousel.min.css';
    @import '/../frontend/css/responsive.css';
    @import '/../frontend/css/style.css';
    .main-header{
        position: relative;
    }
    .parellex{
        margin-top: -125px;
    }
</style>

搜寻
.集装箱{
宽度：960px；
保证金：自动；
}
@导入“/../frontend/css/all.css”；
@导入“/../frontend/css/Animate.css”；
@导入“/../frontend/css/bootstrap.min.css”；
@导入“/../frontend/css/owl.carousel.min.css”；
@导入“/../frontend/css/responsive.css”；
@导入“/../frontend/css/style.css”；
.主标题{
位置：相对位置；
}
帕雷莱斯先生{
边缘顶部：-125px；
}

header.blade.php

@extends（'master.app'））
@节（“内容”）
@端部

app.blad.php

{{--{dd（$lang，Cookie:：get（'lang'））}}--}
{{config（'app.name'，'MyApp'）}
@包括（'flash:：message'）
@认证
@包括（'master.partials.breadcrumbs'）
@endauth
@产量（‘含量’）

那么，我的问题是如何在后端和前端（Vuejs组件）之间划分设计？

---

如果您有任何想法或建议，我将不胜感激。

不确定哪些部分正在战斗。正在加载的所有库或组件的自定义代码

首先，我尝试只加载一次库。例如，您可能只需要一个引导副本

其次，如果是组件代码（例如

main header

），则可以将

scoped

添加到Vue样式标记中。这使得样式和类对于该组件是唯一的

但是，如果将所有这些导入也设置为组件的范围，我不确定会发生什么

---

我认为最好将所有这些库组件加载到整个Vue项目中（导入main.js），而不是加载到组件本身中。这样，您就可以根据所使用的环境有条件地加载内容。

样式范围

您可以从确定每个Vuejs组件的样式范围开始

傅先生{
背景：红色
}

使用网页包

在

webpack.mix.js中，您需要拆分资源

mix.style（['resources/css/frontend.css']，'public/css/frontend.css'）
样式（['resources/css/backend.css']，'public/css/backend.css'）

在Laravel应用程序中使用此选项


Thank you@Darick，正如您所说，我遵循
Webpack
的工作方式，后端对前端（Vuejs的一个组件）没有影响，但前端对后端有影响我该怎么办？您只需要隔离布局，确保前端样式不会影响后端。您是否在后端重复使用组件？不，我只需要通过后端编辑我的主题，并在后端预览主题，以更新徽标、菜单、联系我们等。您可以在后端合并所需的样式。```如果要从应用程序的后端预览前端，请使用mix.styles（['resources/css/backend.css'、'resources/css/frontend.css']、'public/css/backend.css'）`````如果要从应用程序的后端预览前端。你可能想这样做。有没有办法让我想象你现在在做什么。我很乐意为您提供帮助，谢谢您的回复，但我无法得到您的回复@Bryce Howitson