Laravel：vue文件中body和html标签的本地css答案

【问题标题】：Laravel: local css for body and html tag in vue fileLaravel：vue文件中body和html标签的本地css
【发布时间】：2020-12-21 14:27:21
【问题描述】：

我有一个 laravel vue 项目，我想要一个本地 css 到 html 和 body 标签，以便我可以垂直对齐表单。

由于vue文件是从blade文件渲染出来的，所以我在vue文件的style标签中添加的css对于html和body标签是无效的。

如何在vue组件文件的html和body标签中添加本地css？

请帮帮我。

LoginComponent.vue

<template>
    <form class="form-signin text-center my-auto">
        <img
            class="mb-4"
            src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg"
            alt=""
            width="72"
            height="72"
        />
        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input
            type="email"
            id="inputEmail"
            class="form-control"
            placeholder="Email address"
            required
            autofocus
        />
        <label for="inputPassword" class="sr-only">Password</label>
        <input
            type="password"
            id="inputPassword"
            class="form-control"
            placeholder="Password"
            required
        />
        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" value="remember-me" /> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">
            Sign in
        </button>

    </form>
</template>

<script>
export default {};
</script>

<style scoped>
html,
body {
    height: 100%;
}

body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .checkbox {
    font-weight: 400;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
</style>

welcome.blade.php

 <body>
        <div id="app">
           
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
 </body>

【问题讨论】：

标签： php css laravel vue.js

【解决方案1】：

你的 css 是作用域的，所以只有本地组件在使用它。见scoped css：

当标签具有 scoped 属性时，其 CSS 将应用于仅当前组件的元素。

您可以将您的 css 添加到 css 文件中以获得更简洁的代码并且没有作用域 css：

//assets/css/login.css
html,
body {
    height: 100%;
}

body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .checkbox {
    font-weight: 400;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

然后你可以在你的组件中导入：

<style src="@/assets/css/login.css"></style>

【讨论】：

如何在我的组件中添加css文件？您发布的样式标签的代码无法使用 laravel mix 编译。

【解决方案2】：

试试这个可能会成功

  beforeCreate: function() {
        document.body.className = 'local';
    }


<style>
.local{
    height: 100%;
}

.local{
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}
</style>

或者你可以这样尝试

beforeCreate: function() {
      document.body.display =  "-ms-flexbox";
      document.body.display =  "-webkit-box";
      document.body.display =  "flex";
      document.body.alignItems =  "center";
      document.body.justifyContent =  "center";
      document.body.paddingTop =  "40px";
      document.body.paddingBottom =  "40px";
      document.body.backgroundColor =  "#f5f5f5";
    }

【讨论】：

这不是我问的。请再次阅读问题。
那么只有一种方法可以通过 javascript 实现这种添加样式