vous pouvez utiliser le commutateur de ligne de commande -I ou :load_paths de Ruby code pour ajouter sub_directory_a au chemin de charge de Sass. Donc si vous exécutez Sass de root_directory , faites quelque chose comme ceci:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

, Alors 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 OPs et que vous êtes dans un fichier à l'intérieur de sub_directory_b:

@import "~sub_directory_a/_common";

Voir l'Utilisation de la/des Importations dans le sass-chargeur readme: https://github.com/webpack-contrib/sass-loader

Importer un .scss fichier qui a 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 piratage sale qui fonctionnera aussi longtemps que vous avez ajouté assez de ../ pour atteindre la racine de l'OS de déploiement de votre projet.

1. ajouter le chemin SCSS cible comme une cible de recherche pour le compilateur SCSS. Ceci peut être réalisé en ajoutant le dossier stylesheets dans le fichier de configuration scss, c'est-à-dire fonction du cadre que vous utilisez,

utiliser :load_paths à config.rd pour les cadres à base de boussole (ex. rails)

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

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

2. utilisez des chemins absolus (VS des chemins relatifs).

exemple, avec fourseven/meteor-scss , vous pouvez utiliser {} souligner niveau supérieur de votre projet selon l'exemple suivant"

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

Gulfp fera le travail pour regarder vos fichiers sass et aussi en ajoutant des 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'));
});

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

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

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

selon SASS docs .

vous devez définir :load_paths dans votre configuration Sass. Puisque OP utilise Compass, je suivrai cela conformément à la documentation ici .

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

donc, en supposant que votre config.rb est sous project root, ajoutez simplement la ligne suivante: add_import_path 'sub_directory_a'

et maintenant @import 'common'; fonctionne très bien n'importe où.

alors que ceci répond à L'OP, il y a plus.

Annexe

vous êtes susceptible d'exécuter dans les cas où vous voulez importer un fichier CSS d'une manière embarquée, c'est-à-dire pas via la directive @import vanille CSS fournit hors de la boîte, mais un réelle Fusion d'un contenu de fichier CSS avec votre SASS. Il y a une autre question , à laquelle on ne répond pas de façon concluante (la solution ne fonctionne pas dans tous les milieux). Le solution alors, est d'utiliser ce extension SASS.

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

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

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

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

maintenant tout va bien se passer.

P. S., J'ai remarqué que la documentation sass-css-importer indique qu'un préfixe CSS: est requis en plus d'omettre l'extension .css . J'ai découvert qu'il fonctionne indépendamment. Quelqu'un a commencé un question , qui est resté sans réponse à ce jour.

pour définir le fichier à importer, il est possible d'utiliser toutes les définitions courantes des dossiers. Vous devez juste être conscient que c'est relatif au fichier que vous définissez. Plus sur l'option d'importation avec des exemples, vous pouvez cocher ici .

C'est une demi-réponse.

Check out Compass , vous pouvez placer votre _common.scss dans un dossier partials , puis l'importer avec @import common , mais cela fonctionne dans chaque fichier.

j'ai rencontré le même problème. De ma solution je suis venu dans cette. Alors voici votre code:

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

Que je sache si vous souhaitez importer un scss à l'autre sa doit être partielle. Lorsque vous importez du nom de répertoire différent votre more_styles.scss à _more_styles.scss . Puis importez - le dans votre template.scss comme ce @import ../sub_directory_b/_more_styles.scss . Il a travaillé pour moi. Mais comme vous avez mentionné ../sub_directory_a/_common.scss ne fonctionne pas. C'est le même répertoire du template.scss . C'est pourquoi il l'habitude de travailler.

regardez en utilisant le paramètre includePaths...

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

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

node-sass (l'enveloppe officielle de SASS pour node.js ) fournit une option de ligne de commande --include-path pour aider avec de telles 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.scss dans votre projet, vous pouvez l'importer avec @import 'styles/common'; n'importe où dans votre projet.

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

Vous fait juste besoin de le faire sans ".."et d'ajouter "_" dans le fichier importé

dans le modèle.scss:

@import "sub_directory_b/_more_styles.scss"

Et more_styles.scss à _more_styles.scss

j'ai eu le même problème et j'ai trouvé la solution en ajoutant le chemin au fichier comme:

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

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