It is possible to scope styles in Vue component using this approach:
<style scoped src="bootstrap.css"></style>
But issue here arises when there are several components on a page using bootstrap and scoping it several times leads to a CSS code duplication issue - bootstrap.css is included multiple times.
Is there a way to reduce such CSS code duplication or is there another way to have scoped CSS?
Building using webpack and gulp task runner through Visual Studio
It is a legacy ASP.NET Web Forms app and importing styles globally breaks page styling.
Holy grail here is that adding scoped reference to bootstrap.css in vue component, but some magic tool/plugin during webpack build step could automatically check what classes are being used and scope (or extract) only those classes only, so code duplication still exists but not that huge as scoping same CSS files several times and I don't have to pick each of those classes manually and add it to scoped css section. Example of this scenario is .NET assembly weaving.
UPDATE: Ended up with using
<style scoped src="bootstrap.css"></style>
Related
Just getting started with Vue and I can't get the <style scoped> to be processed by Vue. It fails to add the the proper attributes keys to my template elements and fails to augment the CSS classes with attribute specificity. It just behaves like "scoped" was not defined. I am not running any kind of build pipeline framework. Do I have to run some pre-processor or transpiler for this to work? I don't get how the Vue framework is even supposed to know which style block should be scoped to what Vue component since I bundle all my styles in one file.
Scoped css is a feature that is provided by using vue-loader, you can find the documentation here: https://vue-loader.vuejs.org/#what-is-vue-loader
As it is explained there, the scoped css is compiled using webpack. A good way to get started with Vue single file components and all the benefits they bring, is to setup a new vue project using vue-cli, you can find the docs here: https://cli.vuejs.org/guide/installation.html
Is it possible to specify the css rules for only the angular-bootstrap modules that I'm using in my application? For example I'm only using the dropdown, datepicker and tooltip modules from angular bootstrap. However the entire bootstrap css file is required for these three modules. I'm not using bootstraps css in the rest of my application so I think importing the entire css file is overkill.
Webpack has a built in treeshaking function, which will be the easiest option if your project is already done or way ahead in development.
I have also found this treeshaking that manually compiles Bootstrap and uses Gulp to do the treeshaking in the mean time. I found it to be way harder and possibly outputing the same result, but make yourself comfortable.
I use nativescript with VueJs
My problem is that my page specified CSS files aren't used.
My start page is start.js and in the same folder I have a start.css
but the styles aren't applied.
Do I need to something else, or configure?
Because at the docs I said that it normally should work like this.
Always refer the appropriate docs for the flavour, since you are using Vue you must follow the docs here. What you were referring to was for core js one.
With NativeScript Vue you have to write scoped styles within your component, just the same way how you would do it for a Vue based web app.
An external file can be used as Page-Specific CSS as follows in NativeScript-Vue:
<style scoped src="./Home.css"></style>
Where, Home.css is located in your components folder.
Similarly, for SCSS:
<style lang="scss" scoped src="./Home.scss"></style>
Note: You'll need to rebuild your app by if its running on an emulator/device when you make this addition to your .Vue file.
As I become more familiar with Angular, and the vast number of modules out there for making an application really shine, I am also becoming overwhelmed at understanding the basic logic of CSS overloading, and how to manage the imports to get the desired behavior.
For instance, I have pulled the following libraries into my Angular application; Boostrap, Bootcards, boostrap-select, font-awesome, and some custom bootstrap-wizard libraries for a modal tab-based wizard.
All of these libraries require being defined in the index.html page of my Angular app (both the CSS files the JS files). How do you manage the desired behaviors so that one components styles don't override another components styles? What are the best practices around bringing in multiple components and using them in an Angular app, without negatively affecting the applications previous behaviors?
You have 3 choices:
Place more important CSS files AFTER less important ones so the more important override when both have same attribute names.
Manually go in stylesheet and change attribute names.
Instead of including the stylesheet in index, include it in your html file
I'm writing a single-page web application, but I'm struggling with some frameworks.
It seems almost every modern framework, like Bootstrap or Framework7
uses very basic classnames like row or navbar.
Because of this I can't use both frameworks on a webpage at the same time, which is limiting my options. For some pages (like a homepage) Bootstrap is nice, but for other pages I prefer the components of Framework7.
Is there any way to solve this problem, other than using entirely different HTML-files ?
The following options can be used to namespace CSS:
iframe per framework
Create a SASS file which namespaces each framework using the cascade by prefixing each framework rule with a selector which maps to a parent element with the specified class name.
References
How to namespace Twitter Bootstrap so styles don't conflict
Prevent iFrame from taking parent CSS