Lors de l'utilisation de SASS comment puis-je importer un fichier à partir d'un autre répertoire?
En SASS, est-il possible d'importer un fichier à partir d'un autre répertoire? Par exemple, si j'avais une structure comme ceci:
- root_directory
- sub_directory_a
- _common.scss
- template.scss
- sub_directory_b
- more_styles.scss
modèle.scss est possible d'importer des _common.scss à l'aide de @import "common"
mais est-il possible pour more_styles.scss pour importer _common.scss? J'ai essayé quelques choses différentes, y compris @import "../sub_directory_a/common"
et @import "../sub_directory_a/_common.scss"
mais rien ne semble fonctionner.
Vous devez vous connecter pour publier un commentaire.
Ressemble à certains changements SASS ont rendu possible ce que vous avez d'abord tenté de faire:
On nous a même que cela fonctionne pour certains totalement étrangers se trouve dans le dossier
c:\projects\sass
:Ajoutez juste assez de
../
pour être sûr que vous allez terminer à la racine du disque et vous êtes bon pour aller.Bien sûr, cette solution est loin d'être joli, mais je ne pouvais pas obtenir une importation à partir d'un tout autre dossier de travail, ni à l'aide de
I c:\projects\sass
ni de la mise à la variable d'environnementSASS_PATH
(à partir de: :load_paths de référence) à la même valeur.-I
? Si ce chemin d'accès changements il y aura beaucoup de recherche et de remplacement; et elle exige la même structure de dossier local de toute personne qui partage les .scssVous pouvez utiliser le
-I
commutateur de ligne de commande ou:load_paths
option de code Ruby pour ajoutersub_directory_a
Sass du chemin de chargement. Donc, si vous êtes en cours d'exécution Sass deroot_directory
, faire quelque chose comme ceci:Alors il suffit d'utiliser
@import "common"
dansmore_styles.scss
.-I
drapeaux d'inclure plus d'un répertoire, par exemplesass -I sub_directory_a -I sub_directory_c --watch sub_directory_b:sub_directory_b
À l'aide de webpack avec sass-chargeur je peux utiliser ~ à consulter le projet du chemin de la racine. E. g en supposant OPs structure de dossiers et que vous êtes dans un fichier à l'intérieur de sub_directory_b:
Voir l'Utilisation de la/des Importations dans le sass-chargeur readme: https://github.com/webpack-contrib/sass-loader
node_modules/
et non pas à partir de la racine du projet."sub_directory_a"
à monincludePaths
et l'utilisation de la@import "common";
de syntaxe lors de l'utilisation de l'angle de la CLI qui comprend sass-loader.~/
ne semble pas à consulter le répertoire de base pour moi. Ou n'importe quel répertoire, j'ai essayé de tester. Est-il possible de réellement essayer de comprendre d'où cela fait référence??De l'importation d'un
.scss
fichier qui a une imbriquées à l'importation avec une autre position relative ne fonctionne pas. la top réponse proposée (avec beaucoup de../
) est juste un sale hack qui fonctionne aussi longtemps que vous avez ajouté assez de../
pour atteindre la racine de votre projet de déploiement de l'OS.Ceci peut être réalisé en ajoutant les feuilles de style de dossier dans le scss fichier de config, c'est la fonction du cadre que vous utilisez,
meteor
, il était juste un exemple.Gulp va faire le travail pour regarder vos fichiers sass et également ajouter des chemins d'accès des fichiers d'autres avec includePaths.
exemple:
-I
option à partir de la ligne de commande, non?Réponse choisie n'offre pas une solution viable.
OP pratique semble irrégulière. Un shared/common fichier vit normalement en vertu de l'
partials
, une norme standard du répertoire. Vous devez ensuite ajouterpartials
répertoire de votre config importer des pistes pour 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 probablement vous donne une variable globale semblable à du Nœud
__dirname
, qui garde un chemin absolu du répertoire de travail courant (cwd
). Malheureusement, il ne fonctionne pas, et la raison en est parce que l'interpolation sur une@import
directive n'est pas possible, par conséquent, vous ne peut pas faire d'une dynamique chemin d'importation.Selon SASS docs.
Vous devez définir
:load_paths
dans votre Sass config. Depuis l'OP utilise la Boussole, je vais suivre cela avec conformément à la documentation ici.Vous pouvez aller avec la CLI solution comme résolu, mais pourquoi? c'est beaucoup plus pratique pour l'ajouter à
config.rb
. Il ferait de sens à l'utilisation de la CLI pour remplacerconfig.rb
(E. g., différents scénarios).Donc, en supposant que votre
config.rb
est sous la racine du projet, il suffit d'ajouter la ligne suivante:add_import_path 'sub_directory_a'
Et maintenant
@import 'common';
fonctionnent très bien, n'importe où.Tout ceci répond à l'OP, il y a plus.
Annexe
Vous êtes susceptible de s'exécuter dans le cas où vous souhaitez importer un fichier CSS dans un incorporé de manière, qui est, non pas via la vanille
@import
directive CSS fournit à la sortie de la boîte, mais une réelle de fusion d'un fichier CSS contenu avec vos SASS. Il y a une autre question, qui est répondu de manière peu concluante (la solution ne fonctionne pas de la croix-environnement). La solution est alors d'utiliser cette SASS extension.Une fois installé, ajoutez la ligne suivante à votre fichier config:
require 'sass-css-importer'
et puis, quelque part dans votre code:@import 'CSS:myCssFile';
Avis de l'extension doit être omis pour que cela fonctionne.
Cependant, nous allons vers le même problème lorsque vous essayez d'importer un fichier CSS à partir d'un non-chemin d'accès par défaut et
add_import_path
ne respecte pas les fichiers CSS. Donc, pour résoudre ce problème, vous devez ajouter une ligne dans votre config, qui est naturellement similaires:add_import_path Sass::CssImporter::Importer.new('sub_directory_a')
Maintenant tout fonctionne bien.
P. S.,
J'ai remarqué
sass-css-importer
documentation indique unCSS:
préfixe est nécessaire en plus de l'omission de la.css
extension. 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 tous les dossiers de définitions communes. Vous avez juste à être conscient qu'il est relatif au fichier que vous la définir. Plus sur l'option d'importation avec des exemples, vous pouvez vérifier ici.
node-sass
(l'officiel de la SASS wrapper pournode.js
) fournit une option de ligne de commande--include-path
pour aider avec de telles exigences.Exemple:
Dans
package.json
: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.Reportez-vous https://github.com/sass/node-sass#usage-1 pour plus de détails.
C'est une moitié de réponse.
Découvrez Boussole, avec elle, vous pouvez placer votre
_common.scss
à l'intérieur d'unpartials
dossier, et de l'importer ensuite avec@import common
, mais il fonctionne dans chaque fichier.Je suis tombé sur le même problème. De ma solution je suis venu dans cette. Donc, voici votre code:
Que je sache si vous souhaitez importer un scss à l'autre sa doit être partielle. Lorsque vous êtes importation à partir d'un nom de répertoire différent de votre
more_styles.scss
à_more_styles.scss
. Puis l'importer dans votretemplate.scss
comme ceci @import../sub_directory_b/_more_styles.scss
. Il a travaillé pour moi. Mais comme vous l'avez mentionné../sub_directory_a/_common.scss
pas de travail. C'est le même répertoire que letemplate.scss
. C'est pourquoi il l'habitude de travailler.Regarder dans l'aide de la includePaths paramètre...
"SASS compilateur utilise chaque chemin dans loadPaths lors de la résolution de SASS @importations."
https://stackoverflow.com/a/33588202/384884
Dans la version moderne de Sass (au moins
1.17.3
) il fonctionne comme prévu: vous pouvez utiliser des chemins relatifs avec../
dans leur droit hors de la boîte.Ni l'horreur posté dans actuel a accepté de répondre à, ni aucune configuration supplémentaire des directives ou des plugins ne sont pas nécessaire de nos jours.
J'étais ont le même problème et j'ai trouvé la solution en ajoutant le chemin du fichier comme:
@import "C:/xampp/htdocs/Scss_addons/Bootstrap/bootstrap";
@import "C:/xampp/htdocs/Scss_addons/Compass/compass";