I'm trying to integrate a bootstrap dashboard template into an Angular8 project. but I'm getting the resource not found error when I link the css file in index.html,
<link rel="stylesheet" href="./src/assets/css/theme.min.css" id="stylesheetLight">
<link rel="stylesheet" href="./src/assets/css/theme-dark.min.css" id="stylesheetDark">
In my template they used an id attribute in each stylesheet. Because of this id attribute (id="stylesheetLight"), I'm not able to import it into; neither style.css nor angular.json. And without specifying the id, the design will be broken.
The error I'm getting when I import in index.html:
How can solve the resource not found error? Or is there any way that I can specify the id in style.css as #import ?
You have to add it in angular.json file:
"options": {
...
"styles": [
"src/styles.css",
"src/assets/css/theme.min.css"
"src/assets/css/theme-dark.min.css"
],
"scripts": [],
"assets": [
...
]
}
In Angular, adding style sheet like <link rel="stylesheet" href="./src/assets/css/theme.min.css" id="stylesheetLight"> isn't the correct way
I have the same problem, reason why I want to add id is because i want to do this from https://material.angular.io/guide/theming
<link id="themeAsset" rel="stylesheet" href="/path/to/my/theme-name.css">
function changeTheme(themeName) {
document.getElementById('themeAsset').href = `/path/to/my/${themeName}.css`;
}
so i could change style for whole app styles by click instead of adding classes to every component
You can create a stylesheet, e.g. "shared.css", and add it to angular.json file:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/shared.css"
],
and use your styles conditionally:
[class.my-class]="foo=='light'"
Related
We are using Vite and would like to manually load an external CSS file. Internally to the project we are using CSS modules. We need the external CSS file to load after the CSS generated by CSS modules.
In vite.config.js I have tried to add a plugin that adds the stylesheet link to the head section as follows.
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform(html, ctx) {
return [{
tag: "link",
attrs: {"rel": "stylesheet", "type":"text/css", "href": "/*<link to css>*/"},
injectTo: "head"
}]
}
}
}
}
However, this always results in the stylesheets generated by CSS modules to be appended to the head after the external CSS:
<head>
...
<link rel="stylesheet" type="text/css" href="/public/external-css.css">
/* styles generated by CSS modules */
</head>
We don't want this, as the external CSS sets some CSS variables.
How can we force the external stylesheet to be added to the end of the head section?
The problem only occurs while using the dev server (and not in a build). Since the CSS module styles are always appended to <head> in the dev server, you can ensure your <link> is after those styles by injecting into the beginning of <body>. This should be done for the dev server only (in which case the plugin's ctx.server exists), as Vite already appends the <link> correctly to <head> in production builds:
function externalCSSPlugin() {
return {
name: 'external-css',
transformIndexHtml: {
enforce: 'post',
transform(html, ctx) {
return [{
tag: "link",
attrs: {"rel": "stylesheet", "type":"text/css", "href": "/*<link to css>*/"},
injectTo: ctx.server ? "body-prepend" : "head", 👈
}]
}
}
}
}
demo
<template>
<div class="container">
<head>
<link rel="stylesheet" href="~assets/css/style-light.css" />
<link rel="stylesheet" href="~assets/css/login-light.css" />
</head>
</div>
</template>
Importing css like above results in this error
vue.runtime.esm.js:5717 GET http://localhost:3000/~assets/css/login-light.css net::ERR_ABORTED 404 (Not Found)
Is there really no other way loading css other than putting the whole css in the template?
The first thing you need to know is, you can't declare a html head inside any place, neither in yours tamplate, neither in yours components, neither in yours pages, neither in nowhere.
Keep in mind that you can't use a html tags for this, you will use a json schema.
take a look https://nuxtjs.org/guide/configuration for more detailed explanations.
Now about you doubt if you want to import the CSS as globally, the correct place is inside your nuxt.config.js, inside this file, you have a property called head, and inside the head we will configure all the imports.
So, inside nuxt.config.js find your head session, and then create new property called css, some thing like this:
head: {
css: [
'~/assets/style/app.styl',
'~/assets/style/main.css'
],
}
...
Another way, is import your css directly inside your component, for this you can do some thing like this:
<style scoped>
#import '~/assets/style/main.css';
</style>
OR
<style scoped src="#/assets/styles/mystyles.css">
</style>
In Nuxt, you will need a CSS loader instaled in your application too, so have sure you had intalled a "stylus" and "stylus-loader" in your app.
try to impot your css files in script like this :
<script>
import "#/assets/css/style-light.css";
import "#/assets/css/login-light.css";
///
</script>
EDIT: changed ~ to #
You could bring your files in using the head method like so :
head () {
return {
link: [
{ rel: 'stylesheet', href: '/style-light.css' },
{ rel: 'stylesheet', href: '/login-light.css' }
]
}
}
You should also move these css files into the static folder. See this discussion on the Vue forum https://forum.vuejs.org/t/nuxt-import-css-file-and-js-file/42498
My problem is that my stylesheet are getting correctly included in the webpage, but the styles are not getting applied. The problem is as follows:
I am trying to use Angular material, i've correctly setup my app as was shown in the begginer's guide.
I inspected my app and the stylesheets are correctly getting imported (included). However, the styles are not being appplied.
A Screenshot of my network tab:
the application tab also tells that stylesheets have been applied:
I have tried to include the theme designs via three ways:
1) using #import "~#angular/material/prebuilt-themes/indigo-pink.css"; in styles.css
2) using link element in index.html like: <link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> (it didnot worked out)
3) so i made an assets folder and placed all my files there like:
and then in my angular-cli.json file i have gulp configured like:
"assets": [
{ "glob": "**/*", "input": "./assets/Images/", "output": "./assets/Images/" },
{ "glob": "**/*", "input": "./assets/StyleSheets/", "output": "./assets/StyleSheets/" },
{ "glob": "**/*", "input": "./assets/Javascript/", "output": "./assets/Javascript/" },
{ "glob": "**/*", "input": "./assets/Json/", "output": "./assets/Json/" },
"favicon.ico"
]
and i included my stylesheet afterwards like: <link rel="stylesheet" type="text/css" href="assets/StyleSheets/deeppurple-amber.css"> and it worked.
However, when i tried to use the styles like:
<button md-raised-button color="primary">Click me!</button>
the styles were not getting applied.
please help me to find out what wrong am i doing.
And let me know if you need the repository link for re-producing the problem.
I had the same problem. I solved it putting the style in the angular-cli.json file:
"styles": [
"styles.scss",
"../node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
],
There is a Bug in Angular Material I was able to fix it by remove '~' in import
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
to
#import "#angular/material/prebuilt-themes/indigo-pink.css";
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']
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.