Je voudrais charger différents styles globaux de CSS pour différents environnements. En angulaire-cli.json, il est "codé" à "styles.css". Existe-t-il un moyen de charger différents fichiers CSS - basés sur certaines propriétés définies dans l'environnement?
4 Réponses :
Je suggérerais qu'il pourrait y avoir un moyen de le faire en passant dans une chaîne d'environnement à partir de l'environnement. Dossier de l'environnement dans le composant App puisque vous pouvez charger un composant d'environnement spécifique qui a le CSS répertorié dans son tableau de styles ? Mais je ne suis pas sûr si cela est "meilleure pratique"?
Voici un lien expliquant le processus de transmission d'une chaîne à un composant à partir des fichiers de l'environnement: https://www.google.co.uk/amp/taattoocoder.com/angular-cli-uant-the-environment-option/amp/
Merci pour votre suggestion, malheureusement cela n'aide pas. Je suis familier comment utiliser des variables d'environnement à l'intérieur de mes composants, mais dans ce cas, je devrais utiliser une variable d'environnement dans "niveau supérieur", car je souhaite modifier les styles globaux, pas les styles spécifiques des composants. Si Angular-Cli.json permettrait une utilisation des variables d'environnement, une solution serait facile, mais cela n'a pas d'afaik.
Ouais, je vous souhaite utiliser un style "global" de sorte que j'essayais de dire que vous pouviez envelopper chaque "version de l'application" dans un composant global qui a ces styles spécifiques?
Je vois ce que tu veux dire, peut-être que je pouvais tout simplement envelopper à l'intérieur d'une division DIV dans l'application. C'était ma première pensée, mais cette solution ne correspond pas mieux depuis que j'ai besoin de styliser la balise de la carrosserie. (CSS fournis par le client) Si je ne trouve pas la manière dont je suppose que je suppose que je devrais utiliser le style de composant racine au lieu du style du corps de la page. Merci encore.
Vous pouvez ajouter comme mai CSS Fichier mondial que vous souhaitez pour votre projet
Il vous suffit de l'ajouter dans Styles dans Créer Angular-cli.json Fichier: LISTING.CSS Fichier et il sera disponible globalement comme styles.css
Merci pour vos efforts, Shailesh, mais ce n'est pas ce que je veux. Je veux basculer entre différents styles en fonction de l'environnement, pas seulement les utiliser tous en même temps.
Selon ce numéro: https://github.com/angular/angular- CLI / Problèmes / 4685 Il n'y a aucun moyen d'y parvenir avec des environnements. Mais vous pouvez le faire en créant plusieurs applications dans Angular-Cli.json avec des propriétés de "styles" différents.
"apps": [
{
"name": "app1",
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles-app1.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"name": "app2",
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles-app2.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
Basé sur J'ai une application Web d'étiquette blanche que je voulais appliquer des thèmes différents en fonction de quel client c'était pour le client . J'ai d'abord fait deux applications différentes dans le fichier dans le répertoire d'applications I Création d'un dossier nommé Comme vous pouvez le voir Il existe un dossier spécifique du client pour chaque client contenant un fichier J'ai ajouté cela à Le client et ceci à client 2 : Ajout du Cela signifie également que je pouvais Je suis allé un peu plus loin d'ici et créé des fichiers d'environnement spécifiques du client aussi. Comme ceci: J'ai mis à jour le angulaire-cli.json pour client 1 < / Strong> Comme ceci: et pour client 2 comme ceci: Ensuite, a ajouté une propriété «client» pour chaque environnement. Cela m'a permis de prendre des décisions dans mes scripts sur la base de l'application cliente. C'est, par exemple, ce que le fichier Je pourrais ensuite exécuter les deux applications client en même temps que: SCSS spécifique du client
SCSS et a ajouté certains fichiers et sous-répertoires comme: 
_theme.scss . Ce fichier contient des variables SCSS spécifiques au client.Iil existe également des fichiers généraux .scss dans la racine du répertoire SCSS . includepaths signifie importer des fichiers SCSS sans spécifier le chemin complet du fichier, Et en même temps, ne chargez que le fichier thématique correspondant au client. J'ai changé mon styles.scss pour ressembler à ceci: @import 'theme' dans n'importe quel autre fichier .scsss dans mon projet pour accéder à des variables spécifiques à thème.
Environnements spécifiques du client
environnement.client1.prod.ts ressemble à: enfin tout fonctionnant