如何在 Nuxtjs 上忽略全局 css？

Question

我正在使用CoreUI 模板的樣板，工作正常，但我想創建一個具有不同樣式的自定義索引頁面，並且樣板中的全局 css覆蓋了我的一些自定義樣式。

有一種方法可以讓我的布局忽略全局 css？

// pages/index.vue
<template>
    <div>
        <AnonymousNav/>
        <Particles/>
        <div class="atividades container">
            <About/>
            <div class="row text-center">
                <Activity v-for="index in 3" :key="index"/>
            </div>
            <div class="row text-center">
                <Activity v-for="index in 3" :key="index"/>
            </div>
        </div>
        <nuxt/>
    </div>
</template>
<script>
    import AnonymousNav from "../components/anonymous/AnonymousNav";
    import Particles from "../components/anonymous/Particles";
    import About from "../components/anonymous/About";
    import Activity from "../components/anonymous/Activity";

    export default {
        layout: 'index',
        components: {
            AnonymousNav,
            Particles,
            About,
            Activity
        }
    };
</script>

// layouts/index.vue
<template>
    <nuxt />
</template>

<script>
export default {
    head: {
        title: 'Todo',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
        ],
        link: [
            // { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
            { rel: 'stylesheet', type: 'text/css', href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' },
            { rel: 'stylesheet', type: 'text/css', href: '/css/index/style.css' }
        ],
        script: [
            { src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js' },
            { src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js' },
            { src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js' },
            { src: 'https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js' },
            { src: '/js/index/particles.js' },
        ]
    },
}
</script>

Answer 1

它不可能忽略全局 css 到特定頁面但是你可以通過這樣做覆蓋它！重要的 css 技巧像這樣

<div class="first_class">
   <div class="second_class">
    //Do Something
   </div>
</div>

用 css 技巧

.first_class .second_class {
  //add your css with !important
}

希望這可以幫助

謝謝