web-dev-qa-db-fra.com

Lorsque j'utilise SASS, comment puis-je importer un fichier depuis un autre répertoire?

Dans SASS, est-il possible d'importer un fichier depuis un autre répertoire? Par exemple, si j'avais une structure comme celle-ci:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scss pourrait importer _common.scss en utilisant @import "common" mais est-il possible pour more_styles.scss d'importer _common.scss? J'ai essayé différentes choses, y compris @import "../sub_directory_a/common" et @import "../sub_directory_a/_common.scss", mais rien ne semble fonctionner.

importsass
73
spaaarky21

Il semble que certains changements apportés à SASS ont rendu possible ce que vous aviez initialement essayé de faire:

@import "../subdir/common";

Nous avons même réussi à ce que cela fonctionne pour un dossier totalement indépendant situé dans c:\projects\sass:

@import "../../../../../../../../../../projects/sass/common";

Il suffit d’ajouter suffisamment de ../ pour être sûr que vous vous retrouverez à la racine du lecteur et que vous êtes prêt à partir.

Bien sûr, cette solution est loin d'être jolie, mais je ne pouvais pas faire fonctionner une importation depuis un dossier totalement différent, sans utiliser I c:\projects\sass ni définir la variable d'environnement SASS_PATH (from: : load_paths reference ) sur cette même valeur. .

62
Oliver

Vous pouvez utiliser le commutateur de ligne de commande -I ou l'option :load_paths du code Ruby pour ajouter sub_directory_a au chemin de chargement de Sass. Donc, si vous utilisez Sass depuis root_directory, procédez comme suit:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Ensuite, vous pouvez simplement utiliser @import "common" dans more_styles.scss.

33
Miikka

En utilisant webpack avec sass-loader, je peux utiliser ~ pour faire référence au chemin racine du projet. E.g en supposant que la structure du dossier OPs et que vous êtes dans un fichier dans sub_directory_b:

@import "~sub_directory_a/_common";

Voir sous Utilisation/Importations dans le fichier lisez-moi sass-loader: https://github.com/webpack-contrib/sass-loader

12
Sammi

L'importation d'un fichier .scss comportant une importation imbriquée avec une position relative différente ne fonctionnera pas. La réponse proposée en haut (en utilisant beaucoup de ../) est simplement un bidouillage sale qui fonctionnera tant que vous aurez ajouté suffisamment de ../ pour atteindre la racine du système d'exploitation de déploiement de votre projet.

  1. Ajoutez le chemin SCSS cible en tant que cible de recherche pour le compilateur SCSS . Pour cela, vous pouvez ajouter le dossier des feuilles de style dans le fichier de configuration scss, en fonction du cadre que vous utilisez, 

utilisez :load_paths à config.rd pour les frameworks basés sur Compass (Ex. Rails)

utilisez le code suivant à scss-config.json pour fourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}
  1. Utilisez des chemins absolus (par rapport aux chemins relatifs). 

Exemple, avec fourseven/meteor-scss, vous pouvez utiliser {} pour mettre en surbrillance niveau supérieur de votre projet selon l’exemple suivant

@import "{}/node_modules/module-name/stylesheet";
5
helcode

Gulp fera le travail pour regarder vos fichiers sass et aussi pour ajouter les chemins des autres fichiers avec includePaths . Exemple:

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest('css'));
});
3
oshry levy

Pour définir le fichier à importer, il est possible d'utiliser toutes les définitions communes des dossiers. Vous devez juste savoir qu'il est relatif au fichier que vous définissez. Pour en savoir plus sur l'option d'importation avec des exemples, vous pouvez vérifier ici .

1
Nesha Zoric

Examinez l'utilisation du paramètre includePaths ...

"Le compilateur SASS utilise chaque chemin dans loadPaths lors de la résolution des @imports SASS."

https://stackoverflow.com/a/33588202/384884

0
Deejers

Ceci est une demi-réponse.

Check out Compass , vous pouvez y placer votre _common.scss dans un dossier partials, puis l’importer avec @import common, mais cela fonctionne dans tous les fichiers.

0
Alessandro Vendruscolo

Si vous utilisez compilateur Web dans Visual Studio, vous pouvez ajouter le chemin d'accès à includePath dans compilerconfig.json.defaults. Il n’est alors pas besoin d’un certain nombre de ../ puisque le compilateur utilisera includePath comme emplacement pour rechercher l’importation.

Par exemple:

"includePath": "node_modules/foundation-sites/scss",
0
DavGarcia

J'ai rencontré le même problème. De ma solution je suis entré dans ceci. Alors voici votre code:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

Pour autant que je sache, si vous voulez importer un scss dans un autre, il doit être partiel. Lorsque vous importez depuis un autre répertoire, nommez votre more_styles.scss à _more_styles.scss. Puis importez-le dans votre template.scss comme ceci @import ../sub_directory_b/_more_styles.scss. Cela a fonctionné pour moi. Mais comme vous l'avez mentionné, ../sub_directory_a/_common.scss ne fonctionne pas. C'est le même répertoire du template.scss. C'est pourquoi cela ne fonctionnera pas.

0
Sajidur Rahman

Le meilleur moyen est d'utiliser sass-loader. Il est disponible sous forme de package npm. Il résout tous les problèmes liés au chemin d'accès et le rend super facile.

0
Rut Shah