When I use style link in my index.html file in Angularjs2 as follows, the interface works perfectly:
<link rel="stylesheet" type="text/css" href="src/path/to/css/global.css" />
However, when I remove that line, and include the style directly in 'styleUrls' section of component, as follows, it does not work:
#Component({
selector: 'app-d3',
templateUrl: './my.component.html',
styleUrls: [
'src/path/to/css/global.css',
]
});
I can see that the style has been imported into the page (using style tag), but the program can not read it. I have several css files that I want to include them in this way.
Any idea?
The styleUrls path is relative to your component ts file. I think you need to go some folders up. Something like:
styleUrls: [ '../../css/global.css
if you're using Webpack, it could be possible that you're missing the angular2-template-loader. Something like this:
{
test: /\.ts$/,
use: [
'awesome-typescript-loader',
'angular2-template-loader'
]
},
Remove 'src' from the path. Use styleUrls: ['app/myComponent/css/global.css']
Related
I am trying to override the look of the Datepicker from ng-bootstrap. I can change the attributes in the browser with my own colors, but the selectors won't work. Am I even able to access the CSS? I can't find it in any sub-directories.
you need use encapsulation:ViewEncapsulation.None to override the style
#Component({
selector: 'ngbd-datepicker-basic',
templateUrl: './datepicker-basic.html',
styles:[
`.ngb-dp-arrow-btn
{
color:red;
}
`
],
encapsulation:ViewEncapsulation.None
})
Be carefully, ViewEncapsulation.None, make that the .css override all the .css to the whole application (create a tag <styles> at first of the index.html=
On the src root of an Angular 7 application I have 3 less files:
styles.less (global styles)
constants.less (less constants like colors, fonts, ...)
reset.less (css reset)
And I have the following on angular.json under build:
"styles": [
"src/resets.less",
"src/constants.less",
"src/styles.less"
]
In styles.less, to use constants, I needed to add the following:
#import (reference) 'constants.less';
The problem is how to use the constants inside a component's less files?
As an example let me show a HomeComponent (home.component.ts):
import { Component } from '#angular/core';
#Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.less']
})
export class HomeComponent {
}
To use the constants.less I need to add to home.component.less the following:
#import (reference) './../../constants.less';
This makes it work but I have a few questions:
Can I reference constants.less somehow without './../..'?
Should I load constants.less in HomeComponent styleUrls?
Should I move constants.less to a shared folder instead of having in src root?
I placed it there because styles.less is in src root and is using it.
So I though I needed to load it using the angular.json definition file.
Can you tell me how to add scss file to the stackblitz. I tried that.But it is not working. Please see that and let me know.
I have tried to add home.html
This is the project: stackblitz
Scss should work in stackblitz:
#Component({
selector: 'page-home',
templateUrl: 'home.html',
styleUrls: [ './home.scss' ] <== add this
})
export class HomePage {
Styles like
page-home {
.buttoncls {
won't work for you with default encapsulation(ViewEncapsulation.Emulated) because page-home is not part of home component template and angular adds attribute like [_ngcontent-c0] to styles.
So we can change page-home to ion-list and see how it works:
Stackblitz Example (ViewEncapsulation.Emulated)
But we can disable encapsulation:
encapsulation: ViewEncapsulation.None
Stackblitz Example (ViewEncapsulation.None)
See also this thread
https://github.com/stackblitz/core/issues/1
As EricSimons commented 9 days ago:
Hey all! We just shipped SASS and LESS support, and we also support
the angular-cli.json config too :)
Above answer does not work anymore.
Update:
#Component({
selector: 'page-home',
templateUrl: 'home.html',
styleUrls: [ 'home.scss' ] <== add this
})
Also - the styles must go in the most outside block and shouldn't go under other block.
Question: In my Angular2 (4.0) app, how can I import stylesheets (css) from a module in node_modules?
I have a module located here:
node_modules/#swimlane/ngx-datatable
I want to import this stylesheet:
node_modules/#swimlane/ngx-datatable/release/index.css
I've tried the following approaches, with no luck:
In my components own scss file:
#import '~#swimlane/ngx-datatable/release/index.css';
In my component:
#Component({
encapsulation: ViewEncapsulation.None,
selector: 'site_table',
template: require('./site_table.html'),
styleUrls: ['./site_table.scss', '#swimlane/ngx-datatable/release/index.css']
})
Because you're already using SCSS, in your ./site_table.scss import it like so
#import "~swimlane/ngx-datatable/release/index";
Note: do not add the extension.
It will import stylesheet from node package. That served my well, hope it will do for you too. That way you just have to use single stylesheet in your component and it will look cleaner.
If you are using new the angular-cli with the angular.json file and not webpack, the tilde (~) in #sickelap's answer probably doesn't work for you.
Instead what you can do is add this in your angular.json file:-
...
"styles": [
...
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/#swimlane"
]
},
...
Then, in your component's .scss file, insert this:
#import "ngx-datatable/release/index";
Note that the .css extension is not required.
Try it with a complete relative url:
#Component({
encapsulation: ViewEncapsulation.None,
selector: 'site_table',
template: require('./site_table.html'),
styleUrls: [
'./site_table.scss',
'../../node_modules/#swimlane/ngx-datatable/release/index.css'
]
})
Didn't tried your notation but node package resolution might not work without webpack. I may be wrong though.
The below code is that define for style.
<!-- for mobile -->
<link rel="stylesheet" href="/dist/css/mobile.css">
<!-- for desktop -->
<link rel="stylesheet" href="/dist/css/desktop.css">
I want to add above files to <head> in 'src/index.html' by condition.
How can I apply a css file for each device?
As you know, I can't use 'Conditional' code in 'index.html'.
Note that I will not use the method below.
// in angular-cli.json
"apps": [
{
"root": "src",
"index": "index.html",
"styles": [
"/dist/css/mobile.css",
"/dist/css/desktop.css"
]
}
]
// in component.ts
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: '/dist/css/mobile.css'
})
I look forward to your advice.
Thank you.
To dynamically load or change your CSS, you can do the following:
In index.html:
You will have a stylesheet link as follows:
<link id="theme" href="assets/light.css" rel="stylesheet" >
Note that there is "id" for the link element.
In your component you will have as follows:
Import the DOCUMENT from platform-browser
import { DOCUMENT } from "#angular/platform-browser";
then, in your action or on init you will change your css accordingly:
this.document.getElementById('theme').setAttribute('href','assets/dark.css');
By default, you will load one CSS file.. lets say desktop.css. In your application's root component, you can look for the device or cookie or setup some conditions to change from desktop.css to mobile.css. Like you said, you will NOT use angular-cli.json to load your CSS.