Wie man Eckige-CLI kompilieren SCSS zu CSS im assets Ordner
Habe ich eine Eckige 4-Projekt, erstellt mit Winkel-cli-1.0.x.
In dieser Zeit -, Winkel-cli wird aktualisiert auf 1.1.1 in meinem Projekt.
Habe ich einen Ordner "assets" und wenn ich ein css-Datei, kann es verwendet werden.
Aber wenn ich benennen Sie die css-Datei, scss, es ist nicht kompiliert von angular-cli.
Was muss ich tun, um die scss-Datei kompiliert werden, um css?
Dies ist mein Projekt-Paket.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"
}
}
Dies ist mein Projekt .Winkel-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
}
}
Dank
InformationsquelleAutor mvermand | 2017-08-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dass das passiert, weil
assets
Ordner verwendet wird, für einen statischen Inhalt wie pro.angular-cli.json
config:So durch, dass die Einstellung, alle
assets
Ordner-Inhalt wird immer kopiert, wie es ist. Sie müssen Ihre.scss
außerhalbassets
Ordner, es zu vermeiden ausgegeben cli-build-tool-Kette. Sie auch in Betracht ziehen, erstellen Sie einen separaten Ordner für die benutzerdefiniertescss
- Dateien.Wenn Sie sagen, Sie haben
theme.scss
- Datei in Ihremassets
Ordner, den Sie verweisen können, dass in Ihrem globalenstyles.scss
wie@import '/assets/theme';
es wird nur die Arbeit ohnehin als cli wird produzieren ein zu bauen. Dann, nachdem der build produziert hat alle Ihre Stile endete injiziert instyles.bundle.js
. An diesem Punkt gibt es keine Verwendung Ihrerassets/theme.scss
Datei in der Laufzeit, sondern bei der Ausführung des Befehlsng build
es bleibt inassets
Ordner sowieso. So haben Sie besser nehmen Sie es ausassets
Ordner, halten Sie es sauber von unnötigen Dateien.InformationsquelleAutor Kuncevič
Können Sie einen neuen Ordner erstellen mit dem Namen "styles" parallel zu den "assets" - Ordner, und legen Sie Ihre
.scss
- Datei und verweisen Sie den.scss
- Datei in der "styles" - Knoten des.angular-cli.json
Datei:Wenn immer noch nicht funktioniert, dann fügen Sie diese auf den "defaults" - Knoten des
.angular-cli.json
:InformationsquelleAutor Ali Shahzad
Ändern Sie den vorhandenen Stil Ihres Projekts, die Sie benötigen, um diesen Befehl auszuführen.
Wird es ändern Sie die Erweiterung, und Sie werden in der Lage sein, um Zugriff SCSS styles.
Halten Sie Ihre
SCSS
Dateien unterassets
Ordner wie @Kuncevic erwähnt, dassassets
Ordner enthält statische Inhalte.Du meinst, der Stil ist nicht immer stillschweigend?
Ja, in der Tat. O, muss ich ändern, meine stylesheet-links zu .scss zu? Oder sind die scss-Dateien noch transpiled css irgendwo entlang der Strecke?
Es ist schwer zu sagen, wie Sie es verwenden. Aber meine beste Vermutung ist, ändern Sie die stylesheet-links zu .scss und schauen, was passiert.
Als der Winkel 6, hat sich dies geändert: stackoverflow.com/a/50223690/5950725
InformationsquelleAutor The Dictator