web-dev-qa-db-fra.com

Comment importer des fichiers Sass dans angular 6

J'ai créé un nouveau projet angular avec sass et un dossier portant le nom sass contenant un fichier nommé _variables.scss,

dans le composant d'application, j'ai essayé d'importer des variables comme celle-ci.

@import 'variables'

quand je cours ng servir, j'obtiens l'erreur suivante:

./src/app/app.component.scss La construction du module a échoué:

@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)

Notez que j'ai ajouté ce qui suit à angular.json:

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

Structure du répertoire juste un angular starter:

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

je reçois toujours la même erreur: qu'est-ce que je fais mal ici? de l'aide

angularsass
14
Hot Zellah

Je me rends compte que c’est une question plus ancienne, mais les recherches ne cessent de surgir et j’imagine qu’une mise à jour est en ordre. Il existe un moyen de définir vos propres chemins d'importation pour SASS, comme node_modules bibliothèques, tout ce que vous avez à faire est de créer une entrée stylePreprocessorOptions dans la section options du fichier angular.json. Vous n'avez pas besoin de tout inclure en utilisant src\sass

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

Ensuite, dans vos styles, vous pouvez simplement les importer en utilisant

styles.sass

Remarque: n'incluez pas l'extension de fichier ni une initiale ~.

@import 'variables'; // Imports from src/sass
@import 'mixins;
31
Andy Braham

Merci à tous les gars:

Dans un nouveau angular v6: importer un fichier sass est devenu légèrement différent de la version précédente.

J'ai juste besoin d'importer comme ça dans un composant

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

Maintenant tout fonctionne bien

Merci à tous pour l'aide

21
Hot Zellah