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