/deep/ selector for @import

I know that the /deep/ selector has been introduced into Vue in last year.
Today I am trying to import a bootstrap v3 library into page1 and bootstrap v4 library into page2 (which is separated by vue-router). However, when I try to access page2, some bootstrap v3 mixed in!!!

Can I do something like

/deep/ @import url("../bootstrap.css");

Thanks in advance.

Vue has a large large ecosystem of tooling. It would be wise to reference what you are referring to, vue-loader in this case. And no, you can’t. /deep/ is to be used with scoped style definitions.

Then how can I achieve this requirement?
this will mixed up multiple pages css

Please provide samples of what you’re currently doing

For router/index.js I have

import Vue from 'vue’
import Router from 'vue-router’
import Home from '@/views/Home’
import Admin from ‘@/views/Admin’

Vue.use(Router)

export default new Router({
routes: [{
path: ‘/’,
name: ‘Home’,
component: Home
}, {
path: ‘/admin’,
name: ‘admin’,
component: Admin
}, ]
})


For Home, I have

<template>
<div>
<div class="collaspse show">...</div>
</div>
</template>

<style lang="scss">
@import "~bootstrap4/scss/bootstrap.scss";
</style>

For Admin, I have

<template>
<div>
<div class="collaspse in">...</div>
</div>
</template>

<style lang="scss">
@import “~bootstrap3/scss/bootstrap.scss”;
</style>


As you see, bootstrap change .collapse.in to .collapse.show from ver 3 to 4
However, When I router.push from Home page to Admin page,
the css from bootstrap 4 also loaded in to Admin page…

I’m not sure why you’d ever want to do that in the first place. You shouldn’t be loading 2 versions of bootstrap, period.

My question is quite straight forward. How can I use one css file for a component and its child components, another css file for another component and its child components?

I want to prevent they mixed up for anyone of the component. And the problem here is not related to I am using different version of bootstrap or not. I just want to know if there a way to scope the css file to a component and its sub-component only. Thanks.

I understand your question, but I completely disagree with your execution. Never should you force your users to download 2 entirely different versions of a framework because you can’t be bothered to upgrade properly. I won’t encourage that kind of development so therefore I cannot help you.

So I said don’t talk about bootstrap 3 or 4 from now on.

Let us talk about two javascript plugins with different purpose. They are not a framework, just a simple library. You can never guarantee they won’t use a same class name with some common words e.g. show, active.

For a Web Application, you may always use a lot of 3rd party plugins. It is a very serious problem if developers cannot scope these plugins into the component and its child. All of the CSS applied with mutual class name will be mixed up across parallel level view with their children.

I’d like to wake this discussion again, with an agreement on the last post by mannok.

If you introduce a third party library that contains CSS that need to be applied, you really need to be able to scope this imported CSS to that component, and whatever elements get created by that external library. Therefor applying /deep/ to imported CSS should be available in a component.

Now there is no good way to handle this, and imported CSS gets applied on a global level which may interfere with the rest of your application. I’ve had plenty of situations where imported CSS from a library messes with other parts of the application, and I need to put it in a global scope because the library generates it’s own elements.

3 Likes

I am facing the same issue faced by @mannok. I need to import a css file for only a single component.
I am able to do so by using
<style scoped src="buefy/dist/buefy.css">
But the child specifiers in this css files are not getting applied due to scoped property.
Looking for a way to add deep property as we use scoped property

I would suggest doing a global import while name-spacing as a workaround. I agree there are situations where you need a css file for a single 3rd party component. Here’s an example for an vue application which doesn’t want to use bootstrap, but needs to use an open-source 3rd-party component for a rich text editor which expects the library to be available above it.

<style lang="scss">
  .summernote-bootstrap {
    @import "../../node_modules/bootstrap/scss/bootstrap"
    @import "../../node_modules/summernote/dist/summernote-bs4.css"
  }
</style>

Let’s also remember academic discussions about appropriate code development rarely shed light on real-world problems and their potential solutions.

1 Like

I needed this functionality because I was creating a Vue Library that was using its own Bootstrap theme. But I obviously don’t want my theme, or any of my custom scss files to apply to the project/site using my Library.

Foom’s post got me what I wanted. I imported my custom theme (which in turn imports bootstrap and other themes). But I wanted to add that once you import inside of the “namespaced” class, it can then accept the /deep/ on top of that. So you can:

			<template>
			  <b-container class="my-library-theme">
			    <router-view name="my-library-main" />
			  </b-container>
			</template>
			<style lang="scss" scoped>
			/deep/ .my-library-theme {
			  @import "./sass/theme.scss";
			}
			</style>