Dans SASS, est-il possible d'importer un fichier d'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.

On dirait que certaines modifications apportées à SASS ont rendu possible ce que vous avez essayé de faire au départ:

@import "../subdir/common";

Nous avons même fait fonctionner cela pour un dossier totalement indépendant situé dans c:\projects\sass:

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

Ajoutez juste assez ../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\sassni définir la variable d'environnement SASS_PATH(de :: load_paths reference ) à cette même valeur.

Vous pouvez utiliser le -Icommutateur de ligne de commande ou l' :load_pathsoption du code Ruby pour ajouter sub_directory_aau chemin de chargement de Sass. Donc, si vous exécutez Sass depuis root_directory, faites quelque chose comme ceci:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

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

En utilisant webpack avec sass-loader, je peux utiliser ~pour faire référence au chemin racine du projet. Par exemple, en supposant la structure du dossier OP et que vous êtes dans un fichier dans le sous-répertoire_b:

@import "~sub_directory_a/_common";

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

L'importation d'un .scssfichier ayant une importation imbriquée avec une position relative différente ne fonctionnera pas. la meilleure réponse proposée (en utilisant beaucoup de ../) est juste un sale hack qui fonctionnera tant que vous en avez ajouté suffisamment ../pour atteindre la racine du système d'exploitation de déploiement de votre projet.

1. Ajoutez le chemin SCSS cible comme cible de recherche pour le compilateur SCSS. Ceci peut être réalisé en ajoutant le dossier des feuilles de style dans le fichier de configuration scss, c'est fonction du framework que vous utilisez,

utiliser :load_pathsà config.rdpour les cadres basés sur des compas (ex. rails)

utilisez le code suivant à scss-config.jsonpourfourseven/meteor-scss

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

2. Utilisez des chemins absolus (par rapport aux chemins relatifs).

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

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

La réponse choisie n'offre pas de solution viable.

La pratique d'OP semble irrégulière. Un fichier partagé / commun vit normalement sous partials, un répertoire standard standard. Vous devez ensuite ajouter un partialsrépertoire à vos chemins d'importation de configuration afin de résoudre les partiels n'importe où dans votre code.

Lorsque j'ai rencontré ce problème pour la première fois, j'ai pensé que SASS vous donnait probablement une variable globale similaire à celle de Node __dirname, qui conserve un chemin absolu vers le répertoire de travail actuel ( cwd). Malheureusement, ce n'est pas le cas et la raison en est que l'interpolation sur une @importdirective n'est pas possible, vous ne pouvez donc pas faire de chemin d'importation dynamique.

Selon les documents SASS .

Vous devez définir :load_pathsdans votre configuration Sass. Puisque OP utilise Compass, je vais suivre cela conformément à la documentation ici .

Vous pouvez utiliser la solution CLI comme prévu, mais pourquoi? il est beaucoup plus pratique de l'ajouter config.rb. Il serait logique d'utiliser CLI pour le remplacement config.rb(par exemple, différents scénarios de construction).

Donc, en supposant que vous soyez config.rbsous la racine du projet, ajoutez simplement la ligne suivante: add_import_path 'sub_directory_a'

Et maintenant @import 'common';fonctionnera très bien n'importe où.

Bien que cela réponde OP, il y a plus.

appendice

Vous êtes susceptible de rencontrer des cas où vous souhaitez importer un fichier CSS de manière intégrée, c'est-à-dire non via la @importdirective vanilla fournie par CSS, mais par une fusion réelle d'un contenu de fichier CSS avec votre SASS. Il y a une autre question à laquelle on ne répond pas de manière concluante (la solution ne fonctionne pas entre environnements). La solution est alors d'utiliser cette extension SASS.

Une fois installé, ajoutez la ligne suivante à votre config: require 'sass-css-importer'puis, quelque part dans votre code:@import 'CSS:myCssFile';

Notez que l'extension doit être omise pour que cela fonctionne.

Cependant, nous rencontrerons le même problème en essayant d'importer un fichier CSS à partir d'un chemin non par défaut et add_import_pathne respectant pas les fichiers CSS. Donc, pour résoudre cela, vous devez ajouter une autre ligne dans votre configuration, qui est naturellement similaire:

add_import_path Sass::CssImporter::Importer.new('sub_directory_a')

Maintenant, tout fonctionnera bien.

PS, j'ai remarqué que la sass-css-importerdocumentation indique qu'un CSS:préfixe est requis en plus d'omettre l' .cssextension. J'ai découvert que cela fonctionne malgré tout. Quelqu'un a lancé un problème , qui est resté sans réponse jusqu'à présent.

Gulp fera le travail pour regarder vos fichiers sass et ajouter également les chemins d'autres fichiers avec includePaths. exemple:

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

node-sass(le wrapper SASS officiel pour node.js) fournit une option de ligne de commande --include-pathpour vous aider avec ces exigences.

Exemple:

Dans package.json:

"scripts": {
    "build-css": "node-sass src/ -o src/ --include-path src/",
}

Maintenant, si vous avez un fichier src/styles/common.scssdans votre projet, vous pouvez l'importer @import 'styles/common';n'importe où dans votre projet.

Consultez https://github.com/sass/node-sass#usage-1 pour plus de détails.

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

Si vous utilisez Web Compiler dans Visual Studio, vous pouvez ajouter le chemin d'accès includePathdans compilerconfig.json.defaults. Ensuite, il n'y a 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",

C'est une demi-réponse.

Découvrez Compass , avec lui, vous pouvez le placer _common.scssdans un partialsdossier, puis l'importer avec @import common, mais cela fonctionne dans tous les fichiers.

J'ai rencontré le même problème. De ma solution, je suis arrivé là-dedans. Voici donc votre code:

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

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

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

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

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

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 et le rend très facile.

J'ai eu le même problème et j'ai trouvé une solution en ajoutant un chemin d'accès au fichier comme:

@import "C: / xampp / htdocs / Scss_addons / Bootstrap / bootstrap";

@import "C: / xampp / htdocs / Scss_addons / Compass / compass";