Angular2: How to import a stylesheet from node_modules? - css

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.

Related

How to share LESS or CSS files in Angular 7 application?

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.

referencing css in angular

I working in an Angular 2 application. I'm very new to Angular. I'm wondering why my CSS is not working.
I have three files:
landing.component.html
landing.component.scss
landing.component.ts
landing.component.html looks like this:
<div class="c-nav__left">
<img src="/public/imgs/logo#2x.png" width="145px" height="64px" />
<span class="_navbarLogoText">Risk Alive</span>
</div>
Welcome to the landing page!
There's a couple style class I'm referencing there: c-nav__left and _navbarLogoText.
Now here's landing.component.scss:
#import "../../../scss/base.scss";
#import "../../../scss/navbar.style.scss";
All that landing.component.scss does is import other scss files from elsewhere in the application. The class seen in landing.component.html are in navbar.style.scss.
Then there's landing.component.ts:
import { Cookie } from 'ng2-cookies/ng2-cookies';
import { Component } from '#angular/core';
import { ModalService } from '../../../app/common/services/modal.service';
import { Subscription } from 'rxjs/Subscription';
#Component({
templateUrl: './landing.component.html',
styles: [require('./landing.component.scss'), require('../../../scss/navbar.style.scss') ],
providers: [ ModalService ],
})
export class LandingComponent {
....
}
As you can see, I'm requiring both landing.component.scss and navbar.style.scss.
Yes, navbar.style.scss is being referenced twice. I'm trying both approaches: referencing it by an import statement in the scss files itself and also by a require statement in the typescript file.
But neither of these work. I do not see my styles on the page.
Can anyone suggest what I'm doing wrong? Thank you.
You shouldn't use require in the styles param to the #Component decorator - instead use styleUrls:
styleUrls: ['./landing.component.scss']

Add scss file to the Stackblitz

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.

Importing style in AngularJS2 using styleUrls

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']

How to use SASS for components style in Angular 2?

In Angular 2 when we define a component we can specify a styleUrls property to the decorator which points to a set of stylesheets to be applied to the component:
#Component({
selector: 'the-app'
templateUrl: 'templateFile.html',
styleUrls: ['componentStyles.css', 'moreComponentStyles.css']
})
export class TheAppComponent {}
Now, what if I want to write these styles with SASS?
I know I would need to use Gulp or Grunt to transpile the SCSS stylesheets to plain CSS. But this makes me confused on how we would correctly point Angular to the correct stylesheets.
How could I organize this workflow of using SASS with Gulp/Grunt together with Angular 2? How to use SASS to write the Angular 2 components styles?
After following this wiki, I got some Error: Uncaught (in promise): Expected 'styles' to be an array of strings which I resolved using this answer.
Final solution is here:
home.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'home',
template: require('./home.component.html'),
styles: [ String(require('./home.component.scss')) ]
})
export class HomeComponent { }
webpack.conf.js: (part of it)
{
test: /\.(css|scss)$/,
loaders: [
'style',
'css',
'sass',
'postcss'
]
},
You can use .scss in Component like this-
styles: [require('normalize.css'), require('./app.scss')],
See if this helps.
I'm using it this way:
import {Component} from "#angular/core";
// for webpack
require('./footer.scss');
#Component({
selector: 'footer',
templateUrl: 'app/footer/footer.html',
styleUrls: ['app/footer/footer.scss'],
})
export class FooterComponent {}
Command line inside project folder where your existing package.json is: npm install node-sass sass-loader raw-loader --save-dev
In webpack.common.js, search for "rules:" and add this object to the end of the rules array (don't forget to add a comma to the end of the previous object):
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
Then in your component:
#Component({
styleUrls: ['./filename.scss'],
})

Resources