I have an Angular CLI app and I'm using #import '~#angular/material/theming'; in the global styles.scss. I also have a component where I would like to define a css class in that component's .scss file that uses some of the Angular Material typography:
#import '~#angular/material/theming';
$config: mat-typography-config();
.myClass {
font-size: mat-font-size($config, title);
font-weight: bold;
}
By importing ~#angular/material/theming more than once in my application, will it include that css more than once and bloat my payload? Or is the Angular CLI compiler smart enough to handle this?
If you're importing the same CSS into multiple components, then yes the CSS will be duplicated, but each time it will be scoped to that component.
For example if you have the following...
product-list.component.css:
#import '../../foo.css';
...
top-bar.component.css:
#import '../../foo.css';
...
../../foo.css:
a { color: red; }
Your css output in the tag will look something like this:
<style>
a[_ngcontent-gna-c48] { color: red; }
...
</style>
<style>
a[_ngcontent-gna-c50] { color: red; }
...
</style>
Here's a full StackBlitz based on Angular's Getting Started example project.
Related
How would I nest classes like this in SCSS using #import?
.example.test {
color: red;
}
This can be done in SCSS without the use of #import like this:
.example {
&.test {
color: red;
}
}
But how would I do it using #import? Let's say we have a file called rules.scss with the following content:
.test {
color: red;
}
If I were to do
.example {
#import 'rules.scss';
}
Would output
.example .test {
color: red;
}
How would I #import rules.scss with the classes nested together, for example, the follow CSS:
.example.test {
color: red;
}
EDIT per your edit:
first rename the file rules.scss to _rules.scss (note the leading underscore)
Then...
.example {
#import "rules";
}
Here is the SASS/SCSS #import documentation:
Please be aware that #import is in the process of being removed:
The Sass team discourages the continued use of the #import rule. Sass
will gradually phase it out over the next few years, and eventually
remove it from the language entirely. Prefer the #use rule instead.
(Note that only Dart Sass currently supports #use. Users of other
implementations must use the #import rule instead.)
I imported the bootstrap scss using the following code
#import "node_modules/bootstrap/scss/bootstrap";
I can even change default bootstrap variables like :
$border-radius: 1rem;
But the thing is that I can't use bootstrap colors in my own css selectors like this, Why the following code doesn't work? It doesn't change the color.
aside a {
color: $success;
}
use like this
#import "style/variables";
#import "node_modules/bootstrap/scss/bootstrap";
#import "style/my_other_SCSS
in variables.scss
$border-radius: 1rem;
in my_other_SCSS.scss
aside a {
color: $success;
}
this will work.
The issue is that $success isn't set as a SASS/SCSS variable, but rather a CSS var, e.g --success:
aside a {
color: var(--success);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<aside>
link
</aside>
Here's the documentation:
https://getbootstrap.com/docs/4.0/getting-started/theming/#available-variables
There was another !important rule in the stylesheet that was overriding the link color.
a {
color : white !important
}
I'm trying to use the same colors again and again in my Angular test project. So, I made a constants.css where I declare my root constants which are all colors at the moment. However I'm stuck at trying to use them in my individual components' css files.
I tried to include constants.css at the html file and doesn't work. I tried both #import url("constants.css") and #import "constants.css".
constants.css
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
nav.component.css
#import url("../../../constants.css");
a.logo {
color: var(--secondary-color);
}
I expected my logo text to be yellow but it's just default black.
You've forget to declare your variable in your css file where you want to use global variable:
#value --secondary-color from "here should be your address";
a.logo {
color: var(--secondary-color);
}
Let me show an example:
shared.css:
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
and in main.css you should write #value --secondary-color like this
#value --secondary-color from "./shared.css";
.background {
background-color: var(--secondary-color);
}
And do not forget to include your css files:
<link href="shared.css" type="text/css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
Do not forget that order of declaration of stylesheets does matter.
My problem has been the import not working at all because it's Angular thing. I have to import my constant into the main style.css and importing in individual css files doesn't work at all.
The right answer of this link is the answer.
Angular 6 - Less CSS' import is not working anymore
I'm having trouble understanding how exactly I should build sites with CSS. I get that each component has it's own CSS, but should I do this with every component? What if the components are huge with a lot of CSS?
I've looked at some sites that were built with vue.js and they have external CSS files such as a app.css file with a ton of internal style blocks.
I'm use to building sites with Sass in it's own /styles directory and having compass.app compile those .scss files into .css files.
Here's an example of a component css block:
<style lang="scss">
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
a {
color: red;
}
}
</style>
What if that was a thousand+ lines? Would I move that into an external scss file and if so, how? How does this all work?
Thanks.
If you concern is about code separation you can have custom CSS code in a component and add a scoped attribute so the styles you are writing there would only apply to that component:
<style lang="scss" scoped>
/* your scoped css rules here will only apply to this component */
</style>
Now if you also want to compile the CSS from all of your components and merge them into a single final CSS file that you would link from your main HTML file then you need to add a bundler/compiler such as webpack
You can also take a look at vue css-loader to understand how to modularize and compose your CSS rules.
I am using Gulp and Boostrap to put together a theme. I have main.scss file which has the following code:
#import 'base/_base.scss';
#import 'base/_mixins.scss';
#import 'base/_variables.scss';
#import 'layouts/_footer.scss';
#import 'layouts/_header.scss';
#import 'layouts/_nav.scss';
#import 'modules/_typography.scss';
#import 'modules/_blocks.scss';
#import 'modules/_buttons.scss';
#import 'modules/_sections.scss';
#import 'modules/_components.scss';
#import "bootstrap";
#import "bootstrap/theme";
Bootstrap is being loaded ok as I can see it in a index page I have. The issue comes is when I add code to e.g. _base.scss. I added the following:
body {
font-size: 16px;
line-height: 1.5em;
color: #666666;
}
and then ran gulp and I can see that it generated a css main.css file for me, which the index page is using. I can see the body override at the top of the main.css file, but when I load the page it isnt being applied. I can see in inspect element that it is being overridden by bootstrap definition of body further down.
I did another test and set $font-size-base: 16px; and ran gulp and it applied that change fine.
If anyone can point me in the right direction, it would be very much appreciated.
As I see it you have 2 choices.
body
{
font-size: 16px !important;
line-height: 1.5em !important;
color: #666666 !important;
}
You load your css file after bootstrap.
In your css file you add !important to the end of anything you want to override like above.
Can you try this
html body {
font-size: 16px;
line-height: 1.5em;
color: #666666;
}