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

C'est une demi réponse.

Vérifiez Compass Avec elle, vous pouvez placer votre _common.scss à l'intérieur d'un partials et ensuite l'importer avec @import common mais cela fonctionne dans tous les fichiers.

Answer 2

J'ai rencontré le même problème. A partir de ma solution, j'ai trouvé ceci. 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 voulez importer un scss vers un autre, il doit être partiel. Lorsque vous importez à partir d'un répertoire différent, nommez votre fichier more_styles.scss à _more_styles.scss . Ensuite, 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 que celui de la template.scss . C'est pourquoi il ne fonctionne pas.

Answer 3

Le meilleur moyen est d'utiliser sass-loader. Il est disponible en tant que paquet npm. Il résout tous les problèmes liés aux chemins d'accès et rend les choses super faciles.

Answer 4

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

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

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