Comment faire Angulaires-CLI compiler SCSS CSS dans le dossier des actifs
J'ai Angulaire 4 projet, créé avec angulaires-cli 1.0.x.
À ce moment, angulaires-cli est mis à jour 1.1.1 dans mon projet.
J'ai un dossier des actifs, et quand je mets un fichier css, il peut être utilisé.
Mais quand je renomme le fichier css à scss, il n'est pas compilé par angulaires-cli.
Que dois-je faire pour obtenir le fichier scss d'être compilé pour css?
C'est mon projet.json:
{
"name": "my project",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "4.1.3",
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@angular/router": "4.1.3",
"@angular/upgrade": "4.1.3",
"@axinpm/ang-core": "^0.2.3",
"chart.js": "2.5.0",
"core-js": "2.4.1",
"moment": "2.18.1",
"ng2-charts": "1.5.0",
"ng2draggable": "^1.3.2",
"ngx-bootstrap": "1.6.6",
"rxjs": "5.4.0",
"ts-helpers": "1.1.2",
"zone.js": "0.8.11"
},
"devDependencies": {
"@angular/cli": "1.1.1",
"@angular/compiler-cli": "4.1.3",
"@types/jasmine": "2.5.47",
"@types/node": "7.0.22",
"codelyzer": "3.0.1",
"jasmine-core": "2.6.2",
"jasmine-spec-reporter": "4.1.0",
"karma": "1.7.0",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-coverage-istanbul-reporter": "1.2.1",
"protractor": "5.1.2",
"ts-node": "3.0.4",
"tslint": "5.3.2",
"typescript": "2.4.2"
}
}
C'est mon projet .angulaire de la cli.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0-alpha.6",
"name": "my project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"scss/style.scss"
],
"scripts": [
"../node_modules/chart.js/dist/Chart.bundle.min.js",
"../node_modules/chart.js/dist/Chart.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false
}
}
Grâce
OriginalL'auteur mvermand | 2017-08-29
Vous devez vous connecter pour publier un commentaire.
Ce qui se passe parce que
assets
dossier est utilisé pour un contenu statique comme par.angular-cli.json
config:Par avoir ce paramètre, tous les
assets
dossier le contenu est toujours copié comme il est. Vous devez placer votre.scss
à l'extérieurassets
dossier pour éviter qu'il délivrée par la cli outil de construction de la chaîne. Vous pourriez également envisager de créer un dossier séparé pour la réalisation de votrescss
fichiers.Si par exemple, vous avez
theme.scss
fichier dans votreassets
dossier, vous pouvez référencer que dans votre globalstyles.scss
comme@import '/assets/theme';
il suffit de toute façon que cli va produire une génération. Puis, après la construction, a produit à tous vos styles fini injecté dansstyles.bundle.js
. À ce stade, il n'y a pas d'utilisation de votreassets/theme.scss
fichier lors de l'exécution, mais dans le cas où l'exécution de la commandeng build
il restera dansassets
dossier de toute façon. Si vous avez mieux prendreassets
dossier pour le garder propre de fichiers inutiles.OriginalL'auteur Kuncevič
Vous pouvez créer un nouveau dossier nommé "styles" parallèle "actifs" du dossier et placez votre
.scss
fichier et renvoyer le.scss
fichier dans le "styles" nœud de.angular-cli.json
fichier:Si ne fonctionne toujours pas alors ajoutez à cela le "par défaut" nœud de
.angular-cli.json
:OriginalL'auteur Ali Shahzad
Pour modifier le style existant de votre projet, vous devez exécuter cette commande.
Il va changer l'extension et vous serez en mesure d'accéder à SCSS les styles.
Garder votre
SCSS
fichiers sousassets
dossier que @Kuncevic mentionné queassets
dossier contient des contenus statiques.Tu veux dire le style n'est pas implicite?
Oui, en effet. O, dois-je modifier ma feuille de styles pour les liens .scss trop? Ou sont les fichiers scss encore transpiled css quelque part le long de la route?
Il est difficile de dire comment vous l'utilisez. Mais ma meilleure supposition est de changer la feuille de style des liens vers .scss et de vérifier ce qui se passe.
Comme angulaire 6, cela a changé: stackoverflow.com/a/50223690/5950725
OriginalL'auteur The Dictator