Comment Importer des fichiers sass angulaire 6

J'ai créé de nouveaux angulaire du projet avec sass, et j'ai créé un dossier avec le nom sass qui contient un fichier nommé _variables.scss,

en application de la composante j'ai essayé d'importer les variables comme ceci.

@import 'variables'

quand je lance ng servir j'obtiens l'erreur suivante:

./src/app/app.composante.scss
Module 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)

Note, j'ai ajouté ce qui suit à angulaires.json:

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

Structure de répertoire seulement angulaire starter app:

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

toujours je reçois le même message d'erreur: ce que je fais mal ici? toute aide

  • S'il vous plaît, post la structure de répertoire si possible.
  • vérifier juste une nouvelle angulaire starter app rien de spécial
  • Essayez de renommer src/styles.css à src/styles.scss et dans ce fichier comprennent les autres styles dans votre src/sass répertoire. Si vous voulez vérifier cette projet GitHub de la mine, à qui je ne ce que vous essayez de le faire maintenant. Remarquez que dans le angular.json fichier un je jeu "styles": [ "src/styles.scss" ],
  • J'ai ajouté tous les autres que je peux importer tout ce stuf de styles.css, que diriez-vous d'un composant?
  • Je comprends. Voir le la réponse que j'ai posté.
InformationsquelleAutor Hot Zellah | 2018-06-15
  1. 28

    Je réalise que c'est une vieille question, mais revient sans cesse dans les recherches j'ai donc figure d'une mise à jour dans l'ordre. Il existe un moyen de définir vos propres importer des chemins pour SASS comme node_modules bibliothèques, tout ce que vous devez faire est de faire une stylePreprocessorOptions entrée dans le options section angulaire.fichier json. Vous n'avez pas besoin d'inclure le tout à l'aide de src\sass

    angulaire.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": []
},

    Alors à vos styles que vous pouvez simplement importer à l'aide de

    les styles.sass

    Remarque: Ne pas inclure l'extension de fichier ou une première ~.

    @import 'variables'; //Imports from src/sass
@import 'mixins;
    • Travaillé comme un charme!! Merci beaucoup
    • vous êtes incroyable
    • Est-ce la mise à jour pour Angualr 7? Je ne sais pas exactement dans quel volet "options" de le mettre (build? le serveur? test? tous?)
    InformationsquelleAutor Andy Braham
  2. 19

    Merci à tous les gars:

    Dans une nouvelle angulaire v6: l'importation de fichier sass sont devenus peu différentes de la version précédente.

    J'ai juste besoin de l'importation de ce genre dans un composant

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

    Maintenant tout fonctionne très bien

    Merci à tous pour votre aide

    • Maintenant, je suis confus au sujet de ce. ~ est censé se réfère à la node_modules dossier.
    • cette angulaire de la cli v6 est tout à fait différent check it out
    • Je vous remercie beaucoup. La plupart des articles sur l'internet sont basées sur l'ancienne version de l'Angulaire et ils n'ont pas de travail. Merci beaucoup pour cette
    • merci vous avez sauvé ma journée!:)
    • ce n'est pas tout à fait correct. à l'aide de ~va asume que c'est dossier node_modules. Si vous avez un autre dossier en dehors de la src, @Andy Braham la solution est correcte
    InformationsquelleAutor Hot Zellah