I have ASP.NET MVC as server and Angular as client application.
I do not have static index.html but it is index.cshtml. The styles I use are global styles, not component scoped.
My question is how do I go about working with the scss styles file (bunch of) with angular/webpack and MVC?
Do I have to manually import "global style files" in the app.component file? Do I do the same for vendor css files like bootstrap?
What is the best practice? I'm thinking something as follows:
import { Component } from '#angular/core';
import '../styles/myglobalStyles.css'
import '../styles/boostrap.min.css'
import '../styles/otherVendors.min.css'
#Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent { }
Another question is in ANGULAR CLI set up, what is done is to add following in angular-cli.json file. What does it do? Does it add styles.css file to the app.component.html during build? (Can you point out to any source/documentations?)
],
"styles": [
"src/styles.css"
],
You should use webpack to bundle all scss file and transform all scss file to css then extract it to file call lib.css then include it in Layout.cshtml since it global style for your application. Maybe to improve you can use something third party lib to uglify your css code also to improve performance
Cheers
the styles referenced in the component style styleURL metadata, inline in the component template or imported into the component enable CSS encapsulation meaning that they are scoped to the individual component to prevent collisions.
#Component({
selector: 'comp',
templateUrl: './comp.component.html',
styleUrls: ['./comp.component.css']
})
style scope doc https://angular.io/guide/component-styles#style-scope
To create global style rules that will be applied to any element you can add additional style files, including vendor css to the agular.json which will be bundled by webpack (which is embedded in the cli) and linked to the index.html.
add it to the styles array in angular.json:
"styles": [
"styles.css",
"../styles/boostrap.min.css"
],
see the docs on workspace configuration for angular cli
https://angular.io/cli#workspace-and-project-configuration
Related
I am working on an angular project, where I am having my all the CSS files under "styles" folder. Styles configuration in angular.json is as follows:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
In angular component, I am accessing styles as follows:
styleUrls: ['./../../../styles/style1.css']
CSS are getting applied when inside project. But I want to remove my CSS files form styles folder and place them at location external to project for example at "C:\Users\Style\". And want to access styles from this folder in my angular project. I tried to do that by giving C drive path in styleurls and changing path in styles in angular.json. But that is not working. Is there is any way I can do it?
I am working on creating a page with dark mode which has completely different CSS. If I add its CSS files in angular.json under styles
"styles": [
"src/styles.scss",
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/datatables.net-select-dt/css/select.dataTables.css",
"node_modules/ngx-toastr/toastr.css",
"src/assets/scss/black-dashboard.scss"
],
but this is impacting other pages since CSS adding globally and not to a single page as required.
If I want to import it in .ts file, I am not getting how do I link to src folder from any component.ts file.
#Component({
selector: 'app-chart',
templateUrl: './chart.Component.html',
styleUrls: ['./chart.Component.css', '../../..src/assets/scss/black-dashboard.scss']
})
please help me to know how to add a SCSS group of files at component level *.component.ts
start with one point,it says now u here in this folder that with two points go upfolder to src than goes to scss file.
#Component({
selector: 'app-chart',
templateUrl: './chart.Component.html',
styleUrls: ['./chart.Component.css', './../../../src/assets/scss/black-dashboard.scss']
})
I am following the Angular tutorial on their website and I created some components, templates and styles.
I am having trouble including my styles in the components using the 'styleURLs' property of the '#Component' decorator. This is what I have,
#Component({
selector: 'curries',
templateUrl: '../Views/curries.component.html',
styleUrls: ['../../../assets/styles/curries.component.css'],
providers: [CurryService]
})
export class CurriesComponent { // blah blah
As one can see, I put my styles inside the 'assets/styles' folder.
This is my folder structure,
/src
/app
/Views
/Components
/curries.component.ts
/Services
/Models
/assets
/images
/styles
-curries.component.css
I want to know if this is even possible; to have a style document in a different folder and have it referenced in the component.
I am just trying to de-clutter my files in the app directory, and I read somewhere that the images and styles need to be in the 'assets' folder (which is kind of a 'Content' folder, hence it makes sense)
Any help is appreciated :)
p.s. This is the error I get when I build the app
ERROR in ./src/app/Components/curries.component.ts
Module not found: Error: Can't resolve
'../../../assets/styles/curries.component.css' in
'~\AngularProjects\HelloWorld\src\app\Components'
resolve '../../../assets/styles/curries.component.css' in
'~\AngularProjects\HelloWorld\src\app\Components'using
description file: ~\AngularProjects\HelloWorld\package.json (relative
path: ./src/app/Components)
I think you dereferenced 1 level too far. so it should be ../../assets...
That being said, I believe it's generally "best practice" to keep your component specific styles alongside your component files.
Instead of breaking things up by view/component/service/model, break it up by component. we generally have sometihing like :
/src
/app
/compoenents
/curries
curries.component.ts
curries.component.css
curries.component.html
/shared
{ put and shared modules here }
/assets
/images
/styles
{ global styles go here }
https://angular.io/guide/styleguide has a bunch of information on this.
the references(for styles of template url`s) are relative to the "Index.html" your main html page.
Yes you can access any style within the styleUrls array
https://angular.io/guide/component-styles#style-urls-in-metadata
See this Plunker for a good example of referencing other .css files in different paths
#Component({
selector: 'my-app',
template: `
<h1>Title</h1>
<p>Hello...</p>
<span>... world!</span>`,
styleUrls: [
'app/app1.component.css',
'testing/app2.component.css'
]
})
So from Load external css style into Angular 2 Component it seems that including css from an external url by putting it into the styleUrls[] worked for angular 2. It does not work for Angular though (it just searches for the css sheet under the directory). I can't find any documentation regarding this so I'm just hard-coding it into the entire index.html page for now. How can I get it to work for individual components?
Edit: To clarify, by external css I mean something like this: https://www.w3schools.com/w3css/4/w3.css, not something included in my project.
I know it is a bit late answer, but if somebody looks for solution:
You can use command line if you use nodeJS in your app folder write:
npm install --save w3-css
You should adjust then angular-cli.json in your src folder of your app and where you register styles type following:
"styles": [
"../node_modules/w3-css/w3.css",
"styles.css"
],
For including an external css (remote url)for an specific component. I've only found this way. For example for your app component.
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
in your app.component.scss you can import a remote url with the desired remote styles like this css file your were commenting.
#import url('https://www.w3schools.com/w3css/4/w3.css');
Even thought it is not a perfect solution, hope it helps.
i'm developing my first Angular2 app with Typescrypt. Here is an example of Component:
home.component.ts
import {Component} from '#angular/core';
#Component({
moduleId: module.id,
selector: 'home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.css']
})
export class HomeComponent {
}
Since i have to process SASS files to get component-specific CSS, i created the following Gulp task:
gulpfile.js
gulp.task('create:styles', function(cb) {
return gulp.src('src/app/**/*.scss')
.pipe(sourcemap.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemap.write())
.pipe(gulp.dest(paths.dist + '/app/'));
});
As you can see i'm using sourcemaps Gulp plugin to map source files of styles.
As far as i know Angular injects component CSS files in HTML <style> element. So source mapping seems not to work for this reason.
Do you know any workaround to map CSS? I would figure out why i can't see the source files (.scss) in the inspection tools of browsers. What's wrong with sourcemaps plugin?
The answer is that there is nothing we can do at the moment. The feature request is still open on Angular2 Github repository: enter link description here
Taken from this SO answer and this article https://medium.com/#IMM9O/angular-cli-some-special-cases-f48059fb33e5
These flags on ng serve include sourcemaps.
ng serve -sm -ec
Or
ng serve --sourcemap --extractCss
It does not include source maps for the components stylesheets, as you asked, but only for global stylesheets that are included with the angular-cli.json config file. It's still better than nothing, especially because when inspecting an element, you can infer that the only CSS that is not mapped to a source file but to a <style> tag is the CSS of the component's stylesheet.
I'm using angular-cli version 1.0.0-rc.4