El siguiente código es el que define el estilo.
<!-- for mobile --> <link rel="stylesheet" href="/dist/css/mobile.css"> <!-- for desktop --> <link rel="stylesheet" href="/dist/css/desktop.css">Quiero agregar los archivos anteriores a <head> en 'src/index.html' por condición.
¿Cómo puedo aplicar un archivo css para cada dispositivo?
Como saben, no puedo usar el código 'Condicional' en 'index.html'.
Tenga en cuenta que no usaré el método a continuación.
// 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' })Espero su consejo.
Gracias.
Para cargar o cambiar dinámicamente su CSS, puede hacer lo siguiente:
En index.html:
Tendrá un enlace de hoja de estilo de la siguiente manera:
<link id="theme" href="assets/light.css" rel="stylesheet" >
Tenga en cuenta que hay "id" para el elemento de enlace.
En tu componente tendrás lo siguiente:
Importar el DOCUMENTO desde plataforma-navegador
import { DOCUMENT } from "@angular/platform-browser";
luego, en su acción o en init, cambiará su css en consecuencia:
this.document.getElementById('theme').setAttribute('href','assets/dark.css');
Por defecto, cargará un archivo CSS... digamos desktop.css. En el componente raíz de su aplicación, puede buscar el dispositivo o la cookie o configurar algunas condiciones para cambiar de desktop.css a mobile.css. Como dijiste, NO usarás angular-cli.json para cargar tu CSS.