整个网站的全局 Vue 组件样式 "Leaking"

Question

我所说的“泄漏”是指以下内容。我有一个 About.vue 具有自己的样式 (About.scss) 并且它有自己的端点“/about”。我还有主页端点“/”及其相应的 Laravel blade 模板 (Index.blade.php) 具有自己的样式 (Index.scss).

问题

来自 About.scss 的样式正在影响 Index.scss，它们甚至不在服务器返回的同一个 html 文件中。我的整个网站都是这样。在我更新到 Laravel Mix ^5.*.

之前一切都很好

composer.json

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": "^7.4.1",
        "algolia/algoliasearch-client-php": "^2.2",
        "awobaz/compoships": "^2.0.0",
        "barryvdh/laravel-ide-helper": "^2.4",
        "benjaminhirsch/nova-slug-field": "^1.2",
        "dillingham/nova-conditional-fields": "^0.0.1",
        "doctrine/dbal": "^2.9",
        "easypost/easypost-php": "~3.4.4",
        "facade/ignition": "^2.3.6",
        "fideloper/proxy": "^4.0",
        "genealabs/nova-prepopulate-searchable": "^1.0.1",
        "guzzlehttp/guzzle": "^7.0.1",
        "integral/nova-theme": "*",
        "laravel/framework": "^8.0",
        "laravel/nova": "^3.0",
        "laravel/scout": "^8.3",
        "laravel/slack-notification-channel": "^2.0",
        "laravel/tinker": "^2.4.2",
        "laravel/ui": "^3.0",
        "predis/predis": "^1.1",
        "spatie/laravel-permission": "^3.17",
        "staudenmeir/eloquent-has-many-deep": "^1.7",
        "stripe/stripe-php": "^6.16"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.1",
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "laravel/telescope": "^4.0",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.0"
    },
    "autoload": {
        "psr-4": {
            "App\": "app/",
            "Database\Factories\": "database/factories/",
            "Database\Seeders\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://nova.laravel.com"
        },
        {
            "type": "path",
            "url": "./nova-components/NovaTheme"
        },
        {
            "type": "vcs",
            "url": "https://github.com/EasyPost/easypost-php"
        }
    ],
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "scripts": {
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate"
        ],
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover"
        ]
    },
    "config": {
        "preferred-install": "dist",
        "sort-packages": true,
        "optimize-autoloader": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

App.js

import headerComponent from './components/HeaderComponent.vue';
import aboutView from './components/About/About.vue';

Vue.component('header-component', headerComponent);
Vue.component('about-view', aboutView);

const app = new Vue({
    el: '#app'
});

package.json

 "devDependencies": {
        "axios": "^0.18.1",
        "bootstrap": "^4.5.0",
        "cross-env": "^5.2.1",
        "jquery": "^3.5.1",
        "laravel-mix": "^5.0.7",
        "lodash": "^4.17.20",
        "popper.js": "^1.16.1",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.27.2",
        "sass-loader": "^7.3.1",
        "vue": "^2.6.12",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@easypost/api": "^3.8.1",
        "algoliasearch": "^3.35.1",
        "fs": "0.0.1-security",
        "gsap": "^2.1.3",
        "node-vibrant": "^3.1.5",
        "npm": "^7.0.6",
        "rgbaster": "^2.1.1",
        "stickyfilljs": "^2.1.0",
        "update": "^0.7.4",
        "vue-carousel": "^0.11.0",
        "vue-instantsearch": "^2.7.0",
        "vue-moment": "^4.1.0",
        "vue-stripe-elements-plus": "^0.2.10",
        "vue2-collapse": "^1.0.15",
        "vue2-touch-events": "^2.2.1",
        "vuelidate": "^0.7.5"
    }

webpack.mix.js

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

web.php

<?php

Route::get('/', 'GeneralPagesController@index');

Route::get('/about', 'GeneralPagesController@about');

GeneralPagesController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\HomePageNews;


class GeneralPagesController extends Controller
{
  public function index()
    {
        $news = HomePageNews::all();

        return view("integral.index", compact("news"));
    }

    public function about()
    {
        return view("integral.about");
    }
}

About.vue

<template>
    <div class="wrapper"> More component stuff..</div>
</template>
<style src="./About.scss" scoped lang="scss"></style>
<style lang="scss">
    body, html {
        height: 100%;
        overflow: hidden;
    }

    #desktop-footer {
        display: none !important;
    }

    #articleViewMount {
        height: 100%;
    }
</style>

about.blade.php

@extends("integral.integralLayouts.master")

@section("title")
About
@endsection

@section("Styles")
 <meta name="csrf-token" content="{{ csrf_token() }}">

@endsection

@section("sectionOne")

 <div id="articleViewMount">
  <about-view></about-view>
 </div>

@endsection

index.blade.php 又名主页

@extends("integral.integralLayouts.master")


@section("Styles")
   
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
@endsection

// Home page html stuff...

integral.integralLayouts.master.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@yield("title")</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="/css/master.css">
    <link type="text/css" rel="stylesheet" href="/css/mobilemenu.css">


    @yield("Styles")
</head>

<body>
    @yield("LoadingLogo")

    <!-- HEADER & NAV BAR -->
    @include("integral.integralLayouts.header")

<!--SECTION ONE-->
    @yield("sectionOne")

<!-- Flash Messaging -->

    <div id="flashComponentMount">
        <flash message="{{ session('flash') }}"></flash>
    </div>

<!-- FOOTER -->
    @include("integral.integralLayouts.footer")

<script src="{{ mix('js/app.js') }}"></script>

@yield("Scripts")

</body>
</html>

我尝试过的事情：

将“scoped”属性添加到我的样式中，它解决了某种问题，但这也破坏了我网站上其他页面的样式。

这是我在评论 overflow: hidden; 和 display: none !important; 无范围样式之前在控制台中得到的内容。

index/home 页

这表明主页的样式受到 About.scss 的影响。在这里，溢出是隐藏的，就像在 About.scss 中一样。

这是由integral.integralLayouts.master.blade.php实现的页脚组件，也受到About.scss的影响。您可以在页脚标签上看到 display: none !important;。

当我在 About.vue 中评论无范围样式的 overflow: hidden; 和 display: none !important; 时，会发生这种情况。

About.vue

<template>
    <div class="wrapper"></div>
</template>
<script src="./About.js"></script>
<style src="./About.scss" scoped lang="scss"></style>
<style lang="scss">
    body, html {
        height: 100%;
        /*overflow: hidden;*/
    }

    #desktop-footer {
        /*display: none !important;*/
    }

    #articleViewMount {
        height: 100%;
    }
</style>

overflow: hidden; 不再应用于 index.blade.php 的 html 标签。

而且 display: none !important; 也没有从 About.vue 应用到页脚组件。

编辑

根据@matticustard 的建议，我也只是尝试像这样在全球范围内注册我的 vue 组件，但无济于事。

Vue.component('header-component', require('./components/HeaderComponent.vue').default);
Vue.component('about-view', require('./components/About/About.vue').default);

const app = new Vue({
    el: '#app'
});

为什么现在而不是以前会发生这种情况？它已经工作了几年了。

Answer 1

好吧，我不得不硬着头皮将所有样式转换为“作用域”，扫描我网站上的所有页面以修复任何重大更改。它糟透了，但到目前为止，我认为我发现了所有样式问题并且能够修复它们。

我感觉 Laravel-Mix ^5.0 编译其资产与以前的版本相比略有不同。那是我最好的猜测。

整个网站的全局 Vue 组件样式 "Leaking"

Global Vue Component Styles "Leaking" Over Entire Website

laravel

vue.js

laravel-mix