主页 / 问题 / 1038218
Accepted
MoloF
Asked:2020-10-24 22:03:08 +0000 UTC2020-10-24 22:03:08 +0000 UTC

Laravel Vuejs | 如何安排样式文件以使应用程序正常工作

  • 772

我正在开发一个使用后端作为Laravel和前端作为VueJS的应用程序。SPA应用程序。在Vue 中，我使用routes。

我把样式文件分散在sass文件夹下， 有几个文件：app , variables , auth , profile。

有一个入口点app.vue，其中包含以下代码：

<template>
    <router-view></router-view>
</template>

接下来是几个文件：Home.vue、Auth.vue、Profile.vue。

它们本身具有其他模块的连接。实际上，在每个文件中，我通过以下方式连接样式：

<style lang="sass" scoped>
    @import "../../sass/app.sass"
</style>

但我有这个问题。这些文件中的每一个在内部都使用了更多的路由，因此将这些导入中的每一个添加到每个组件中是没有意义的，所以我在其中添加了::v-deep选择器来加深它，但这甚至不是重点。

底线是我无法正确分散逻辑。

首先，每个我的风格：auth.sass，app.sass都有完整的代码

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap')

@import "variables"

*
    outline: none
    margin: 0
    padding: 0
    box-sizing: border-box

a
    color: inherit
    text-decoration: none

    &:hover, &:active, &:focus
        text-decoration: none
        color: inherit

ul, li, ol
    list-style-type: none

body
    font-family: $font-family-default
    background-color: $body-bg

因此，这段代码在导入时甚至在父组件上都不起作用，问题出在选择器上，每个 html 元素分别在样式中分别赋予data-v-782dcf84，分别为body[data-v-782dcf84 ]，但是，当我打开同一个代码检查器时，我的身体没有其他属性。只是一个标签. 好的，如果这个问题可以解决，添加到app.vue输入文件中没有scoped，那么包括字体呢？我如何正确连接所有这些东西？

这里的问题不在于其解决方案，而在于应用程序的正确设置。我对拐杖不感兴趣，我更感兴趣的是如何正确组织风格的呈现并继续前进，以免再次遇到这些事件。

laravel

1 个回答

  1. Best Answer

    我在一个名为_myawesomesassfle.scss.

    使用超过 2 次的所有东西我都放在一个文件_variable.scss中，或者_mixins.scss

    在文件夹的根目录下，我创建主文件style.scss/main.scss或任何我喜欢的文件。我已经在其中包含了基本文件：

    @import "libs";

/* Utils */
@import "utils/variables";
@import "utils/mixins";
@import "utils/grid";
@import "utils/extends";
@import "utils/fonts";

/* Base */
@import "base/base";

    然后只是组件样式文件，以免弄乱单文件组件。每个组件都有一个根元素，我给它一个类，例如profile，在_profile.scss我用类绑定编写代码时，例如：

    .profile{
   // стили которые касаются только конкретного компонента
}

    并且在构建项目时，连接了一个现成的缩小文件

    我的示例结构：

    ├── base
│   └── _base.scss
├── includes
│   ├── _footer.scss
│   └── _header.scss
├── _libs.scss
├── style.scss
└── utils
    ├── _extends.scss
    ├── _fonts.scss
    ├── _grid.scss
    ├── _mixins.scss
    ├── _smart-grid.scss
    └── _variables.scss

    嗯，像这样）

    vue组件结构：

    <template>
  <div class="myawesomeclass">
    <slot/>
  </div>
</template>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>
<script>
  import Header from '../components/Header'
  import Footer from "../components/Footer";
  export default {
    components: {Header, Footer},
  }
</script>
<style lang="scss">
@import "../styles/myawesomefile";
</style>

    该组件的样式文件

    .myawesomeclass{
  @include wrapper();
  &__list{

    @include flex_container(row, center, space-between);

    &__item{
      width: 262px;
      @include flex_container(column, center, center);

      .subtitle{
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        @include flex_container(row, center, space-between);
      }

      img{
        width: auto;
      }
    }

    @for $i from 1 through 4{
      &__item:nth-child(#{$i}){
        .subtitle{
          &::before{
            content: "#{$i}";
            font-size: 60px;
            font-weight: 400;
            font-style: normal;
            margin-right: 20px;
          }
        }
      }
    }
  }
}

@include adaptive(tablet-sm){
  .myawesomeclass{
    &__list{

    }
  }
}

@include adaptive(mobile){
  .myawesomeclass{
    &__list{
      flex-wrap: wrap;
      &__item{
        width: 100%;
        text-align: left;
      }
    }
  }
}
@include adaptive(mobile){
  .myawesomeclass{
    &__list{
      flex-wrap: wrap;
    }
  }
}

    是的，我将自适应导入每个元素，通过@include adaptive(mobile) adaptive-这是一个mixin，如果那样的话）我为什么这样做，是的，因为它对我来说更方便，一切都清楚地相互分离）

    • 1

相关问题