I'm making a custom directive <top-nav>.
Should I isolate the CSS for this in its own file?
What if it requires CSS from the main application that's shared across other pages?
Take a look at LESS and SASS css compilers.
I structure my apps like this.
/app
/directives
/fooWidget
fooWidget.scss
fooWidget.js
fooWidget.html
/directives.scss
/app.scss
/app.js
If you intend to publish it somewhere then you definitely want to isolate the CSS.
If this is only for internal use, it's a matter of preference, but I think the majority of developers would prefer if it's separate.
CSS in a separate file can still inherit from CSS defined elsewhere. Eventually you'll probably end up using Gulp to minify and combine all your CSS anyway.
I don't see that as a necessity. If you are adding a template in your directive, then keeping the css to the external file won't do any harm, as the directive gets loaded when the DOM is being parsed & the style written for the element will be loaded accordingly from the external style sheet.
Hope that helps.
It is a good practice to use an isolate CSS file to the directive. You can use a structure for the directive like this:
/clockWidget
clockWidget.css
clockWidget.js
clockWidget.html
For the directive css it self you can create a css class that wraps all the html and use that class to affect only the directive html.
for instance, create the footer-widget css class and specify that class for the html elements of the directive.
In the clockWidget.css:
span .footer-widget{
background-color: red;
}
then in your html:
<div class="footer-widget">
<span>I'm The footer</span>
</div>
This way the css class will wrap all the html, only affecting the directive html. And you can use main application css without problems.
Related
I am using prime ng dialog all over my angular application. I can change each specific dialog style by using ng-deep. For eg I have contact us page for which I have these files:
contact.html
contact.component.ts
contact.css
So I place the below css in contact.css and it changes the contact us dialog title bar color.
:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
background-color: red
}
I want to do this for all the dialogs in my application, how can I do this? I placed the same css in style.css file in src folder and it didn't work.
So angular components by default employ a very handy strategy of Style Encapsulation which makes it so that styles don't bleed out into other components and cause unwanted effects.
You can utilize ng-deep like you have to allow styles defined within it to be inherited by child components of where it's specified.
However for things to be globally inherited you'll want to define them highest up in the order of inception so those styles cascade down to selectors below. In a default angular application that's not using SCSS or another pre-processor one of the easiest ways to do this is to add them to one of the first files initialized that hosts the child components such as index.html or app.component to allow components initialized afterwards to inherit them when they're rendered.
Hope this helps, cheers!
How do we override the CSS created by an angular directive. For example when we add the add the sort directive to the material data table it creates this problem (It overrides the layout of the column header)..
Overriding the CSS via styles.scss or the components local CSS, does not work, because the directive adds an inline style which has priority. Also tried adding !important to the CSS definition override, but no love.
Thoughts?
I can suggest one method, write a custom CSS class in your component's CSS/SCSS file and apply it using a condition with NgClass directive,
execute your condition within onInit.
just try and see, I hope it'll work
You can either use NgStyle or Angular Style Binding if classes' style is not being applied. Best way is to use ngdeep
If this still doesn't work put it on a setTimeout or ngAfterViewChecked (Not recommended tho.).
I am working with laravel-vuejs application. When vuejs renders css, then it appends some style tags in the html head like below image. Is there any way to hide this tags. I think it is possible using webpack.conf in vuejs by adding some plugin like, copy-webpack, extra-text-ebpack, optimize-css-assets-webpack etc. but how to do it in larave-vue application.
you can use extractVueStyles in laravel-mix
extractVueStyles: Extract .vue component styling (CSS within
tags) to a dedicated file, rather than inlining it into the HTML.
Laravel Mix Options
I guess you might write CSS in each Vue single file component,like this:
//test.vue
<template>
<div></div>
</template>
<style>
div{
//...
}
</style>
Why not write these CSS in a CSS file and then require it in main.js?then you need't to think about removing these style tags.
I need to create a "plugin" that contains a user interface which will be displayed on many different vendor websites. This is a CMS agnostic plugin. I cannot use an iframe for SEO reasons. I need to isolate the plugin's css (and maybe js) from the rest of the website, and stop the rest of the website's css from getting to this plugin. How can I do this?
Update:
Ok, so I've asked a question that's a little too specific to my setup/tech. The question should have been: How do I isolate an html element from the rest of the document styles? This is answered here;
New Question: How do I scope Vue CSS so that it doesn't propagate up, but propagates to child components?
E.g I have the main Vue component which includes bootstrap.scss, i need that to apply to all child components, but I don't want it to leak into the main website. Adding scoped to style stops the leak upward, but I want it to apply to child classes as well.
Ok, I've figured it out.
Pretty simple really, combined with this answer to prevent parent -> child inheritance. I scoped all Vue css into #app { /*styles*/ } INCLUDING the bootstrap import. E.g.
<style type="text/scss" lang="scss">
#app {
#import '../node_modules/bootstrap/scss/bootstrap';
// rest of vue global styles go here.
// child components may use scoped
}
</style>
Note: I am NOT using scoped attribute on the root vue component.
I think this is what you’re looking for. In your .vue file you can add style tags to the template, then Vue will create Shadow DOM styles that only apply to your application. In the final product the styles are rendered via a data-v attribute to prevent class name conflicts.
https://vue-loader.vuejs.org/en/features/scoped-css.html
(Copied from my reddit answer)
https://www.reddit.com/r/vuejs/comments/76ss46/how_to_isolate_a_vue_application_from_the_rest_of/?st=J8UMA1JQ&sh=c3ebf5b1
I downloaded a Web template which is based on bootstrap version 3.
Inside the template I found CSS files named bootstrap-cerulean.css, bootstrap-journal.css, bootstrap-classis.css. Although, I can not find a file named bootstrap.css. What do bootstrap-cerulean.css, bootstrap-journal & bootstrap-classis define or do? Are they themes for bootstrap? Do I still need to reference bootstrap.css if I reference one of the themes such as bootstrap-cerulean.css?
All the bootstrap.css styles are most probably modified and integrated with those three mentioned custom css files that you got with the template so no, you don't need to link the default bootstrap.css anymore unless you're planning to override certain elements on the page to the default style (which I would recommend using a new css file with the few changes kept there for overriding the template's style rather than linking the whole bootstrap.css to the template.