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.
Related
I recently started to work with React and I want to use an admin template. I am looking for a way to import the styles from theme to React components. I am using Keen Admin Theme
Theme includes all necessary html, js and sass files. Various tutorials suggest copying and pasting the html code inside the component but I am looking for a more practical way rather than copying and pasting because JSX requires additional changes on html, furthermore I think it is not a good practice.
So what I am looking for is similar to Angular's approach, so I can pass the html file directly to the component.
Angular's approach:
#Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
styleUrls: ['./component-overview.component.css']
})
If there is no such option what is the recommended way of using out-of-box themes in React?
The best way is to write it yourself to avoid copying pasting. Or find the components that are of React or Angular (as per your requirements)
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
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'
]
})
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
I am using a third party javascript library in my angular2 component. The skin css of the component tries to load images using relative url paths. I am using a component based architecture and likes to have all the component dependencies encapsulated.
Below is what I try to do, the skins library fails to locate the relative path images.
#Component({
moduleId: module.id,
selector: 'test',
templateUrl: 'test.html',
styleUrls: ['test.css', '../../external_lib/skins/skyblue.css'],
encapsulation:ViewEncapsulation.None
})
Is there any way to accomplish this ?
Currently the only workaround is to include the css in the index.html file.
When it comes to defining styles and template like styleUrl and templateUrl you should be very careful.
The problem is that it is your responsibility to make sure that given url will be accessible even after build.
To make it happen you can make your own task in grunt, gulp, npm or some other task runner or use bundler like webpack to use relative path which then will be translated to the production build.
In your example you have to point styleUrl to the path when it's located while serving whole app.