时间戳

首页 > 解决方案 > 如何忽略 Nuxtjs 上的全局 CSS？

javascript - 如何忽略 Nuxtjs 上的全局 CSS？

问题描述

我正在使用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>

标签： javascriptcssvue.jsnuxt.js

解决方案

它不可能忽略全局 css 到特定页面，但是你可以通过使用 !important 像这样的 css 技巧来覆盖它

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

用 css 技巧

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

希望这可以帮助

谢谢

推荐阅读