I've been utilizing a boilerplate that integrates with the CoreUI template from GitHub, and it's been working well. However, I am now looking to customize my index page with a unique style, and I'm encountering issues where the global CSS from the boilerplate is interfering with my custom styles.
Is there a way for my layout to disregard 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>