如何在 Nuxtjs 上忽略全局 css？

Question

I'm using a boilerplate to CoreUI template , works fine, but I want to create a custom index page with a different style and the global css from the boilerplate is overwriting some of my custom style.

There's a way to my layout ignore the global 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

its not possible to ignore global css to perticular page however you can overwrite it by doing !important with css trick like this

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

with css trick

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

hope this helps

Thanks