Gewusst wie: Importieren von sass-Dateien im Winkel 6

Erstellte ich neue eckige Projekt mit sass, und ich erstellten Ordner mit dem Namen sass, die enthalten, eine Datei mit dem Namen _variables.scss,

in-app-Komponente, die ich versucht zu importieren Variablen wie dieses.

@import 'variables'

wenn ich ng dienen, bekomme ich die folgende Fehlermeldung:

./src/app/app.Komponente.scss
Modul build failed: 

@import 'variables'
^
      File to import not found or unreadable: variables.
      in C:\Users\Bonge\Documents\Projects\movies_database\movies-client\src\app\app.component.scss (line 1, column 1)

Hinweis habe ich noch folgende zu eckig.json:

"stylePreprocessorOptions": { "includePaths": [ "src/", "src/sass/" ]

Directory-Struktur nur ein Winkel-starter app:

|- src/
    |- sass/
        |- _variables.scss
        |- _mixins.scss
        |- styles.scss

trotzdem bekomme ich die gleiche Fehlermeldung: was mache ich hier falsch? jede Hilfe

  • Bitte, veröffentlichen Sie die Verzeichnis-Struktur, wenn möglich.
  • check es einfach eine neue eckige starter-app nichts besonderes
  • Versuchen Sie das umbenennen src/styles.css zu src/styles.scss und in dieser Datei sind die anderen Stile in Ihrer src/sass - Verzeichnis. Wenn Sie mögen, schauen Sie sich diese GitHub-Projekt von mir, in dem ich das tun, was Sie versuchen zu tun, jetzt. Beachten Sie, dass in der angular.json Datei eine ich "styles": [ "src/styles.scss" ],
  • Ich fügte hinzu, alle anderen, die ich importieren können, alle diese stuf Stile.css, wie etwa in einer Komponente?
  • Ich verstehe. Siehe die Antwort, die ich gepostet.
InformationsquelleAutor Hot Zellah | 2018-06-15
  1. 26

    Ich weiß, dies ist eine ältere Frage, aber immer wieder Suchanfragen, so dass ich vermute ein update ist in Ordnung. Es gibt einen Weg zu definieren, Ihre eigenen import-Pfade für SASS wie node_modules Bibliotheken, alles, was Sie tun müssen, ist, eine stylePreprocessorOptions Eintrag in der options Abschnitt der eckigen.json-Datei. Sie brauchen nicht, um alles umfassen, was mit src\sass

    eckig.json

    "options": {
  "outputPath": "dist/App",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "src/sass/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/sass"
    ]
  },
  "scripts": []
},

    Dann in Ihrem Stile können Sie ganz einfach importieren Sie Sie mit

    Stile.sass

    Hinweis: zählen Sie nicht die Datei-Endung oder eine erste ~.

    @import 'variables'; //Imports from src/sass
@import 'mixins;
    • Klappte!! Ich danke Ihnen so sehr
    • Sie sind erstaunlich
    • Ist dieser aktualisiert für Angualr 7? Ich weiß nicht genau, in welche "Optionen" - Abschnitt, um es zu setzen (bauen? server? testen??? alle?)
    InformationsquelleAutor Andy Braham
  2. 19

    Dank an alle Jungs:

    In einem neuen Winkel-v6: Import von sass-Datei haben, werden wenig andere von der vorherigen version.

    Ich brauchte nur zu importieren, wie dies in einer Komponente

    @import "~src/sass/variables";    //note: without file extension

    Nun funktioniert alles wunderbar

    Danke an alle für die Hilfe

    • Jetzt bin ich verwirrt darüber. ~ soll, bezieht sich auf die node_modules Ordner.
    • dieser Winkel cli-v6 ist ganz anders überprüfen Sie es heraus
    • Ich danke Ihnen sehr. Die meisten Artikel auf das internet basieren auf der älteren version von Eckigen und Sie arbeiteten nicht. Vielen Dank so viel für diese
    • danke das Ihr meinen Tag gerettet!:)
    • das ist so nicht ganz richtig. mit ~wird davon ausgehen, dass es node_modules-Ordner. Wenn Sie einen anderen Ordner außerhalb src, @Andy Braham Lösung richtig ist
    InformationsquelleAutor Hot Zellah
Schreibe einen Kommentar