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

Question

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 à l'aide de @import "common" mais est-il possible que more_styles.scss importe _common.scss ? J'ai essayé plusieurs choses différentes, notamment @import "../sub_directory_a/common" y @import "../sub_directory_a/_common.scss" mais rien ne semble fonctionner.

Answer 1

UPDATE : Veuillez considérer La réponse de Mikka d'abord - cela devrait fonctionner sans problème si vous souhaitez uniquement inclure les éléments suivants sous-répertoires . Ma réponse est spécifique à l'inclusion de répertoires autre que les sous-répertoires, mais fonctionne pour ceux-ci aussi. Mais : Ce n'est pas la façon idiomatique de le faire.

---

Il semble que certaines modifications apportées à SASS aient rendu possible ce que vous avez essayé de faire initialement :

@import "../subdir/common";

Nous avons même réussi à faire fonctionner ce système pour un dossier sans aucun rapport avec le sujet, situé dans le dossier de l'utilisateur. c:\projects\sass :

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

Ajoutez juste assez ../ pour être sûr que tu arriveras au drive Root et tu es prêt à partir.

Bien sûr, cette solution est loin d'être jolie, mais je n'ai pas réussi à faire fonctionner l'importation à partir d'un dossier totalement différent, ni en utilisant l'option I c:\projects\sass ni la définition de la variable d'environnement SASS_PATH (de : :load_paths référence ) à cette même valeur.

Answer 2

Vous pourriez utiliser le -I ou le commutateur de ligne de commande :load_paths du code Ruby pour ajouter sub_directory_a au chemin de chargement de Sass. Ainsi, si vous exécutez Sass à partir de root_directory faites quelque chose comme ça :

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Vous pouvez alors simplement utiliser @import "common" sur more_styles.scss .

Answer 3

En utilisant webpack avec sass-loader je peux utiliser ~ pour faire référence au chemin racine du projet. Par exemple, en supposant que la structure des dossiers du PO et que vous êtes dans un fichier à l'intérieur du sous-répertoire_b :

@import "~sub_directory_a/_common";

Documentation : https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

2021 Modifier : utiliser ~ est maintenant déprécié et le lien ci-dessus indique :

L'utilisation de ~ est dépréciée et peut être retirée de votre code (nous recommandons nous le recommandons), mais nous le supportons toujours pour des raisons historiques. Pourquoi pouvez-vous le supprimer ? Le chargeur essaie d'abord de résoudre @import comme un chemin d'accès relatif. relatif. S'il ne peut pas le faire, le chargeur essaiera alors de résoudre @import à l'intérieur de node_modules.

Answer 4

Importation d'un .scss qui comporte une importation imbriquée avec une position relative différente ne fonctionnera pas. La réponse proposée en haut de la page (utiliser beaucoup de fichiers ../ ) n'est qu'une simple astuce qui fonctionnera tant que vous aurez ajouté suffisamment de ../ pour atteindre la racine de l'OS de déploiement de votre projet.

1. Ajouter le chemin SCSS cible comme cible de recherche pour le compilateur SCSS. Ceci peut être réalisé en ajoutant le dossier stylesheets dans le fichier de configuration scss, ceci est fonction du framework que vous utilisez,

utiliser :load_paths à l'adresse config.rd pour les cadres basés sur le compas (Ex. rails)

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

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}

2. Utilisez des chemins absolus (plutôt que des chemins relatifs).

Exemple, avec fourseven/meteor-scss vous pouvez utiliser {} pour mettre en évidence le niveau supérieur de votre projet comme dans l'exemple suivant

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

Answer 5

Gulp se chargera de surveiller vos fichiers sass et d'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'));
});