Question

我正在使用boilerplate to CoreUI template，工作正常，但是我想创建一个具有不同样式的自定义索引页，而样板中的global 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这样的css技巧来覆盖它

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

使用CSS技巧

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

希望这会有所帮助

谢谢

如何在Nuxtjs上忽略全局CSS？

1 个答案: