web-dev-qa-db-fra.com

Importer un fichier CSS normal dans un fichier SCSS?

Est-il possible d'importer un fichier CSS normal avec la commande @import de Sass? Bien que je n’utilise pas toute la syntaxe SCSS de sass, j’apprécie tout de même sa combinaison/compression de fonctionnalités et je voudrais pouvoir l’utiliser sans renommer tous mes fichiers en * .scss.

sass
463
GSto

On dirait que ceci n'est pas implémenté, au moment d'écrire ces lignes:

https://github.com/sass/sass/issues/19

Pour libsass (implémentation C/C++), l’importation fonctionne pour *.css de la même manière que pour les fichiers *.scss - omettez simplement l’extension:

@import "path/to/file";

Cela importera path/to/file.css.

Voir cette réponse pour plus de détails.

Voir cette réponse pour Ruby implementation (sass gem)

180
Stephen Fuhry

Après avoir eu le même problème, j'ai été confondu avec toutes les réponses ici et les commentaires sur le référentiel de sass dans github.

Je tiens simplement à souligner qu'en décembre 2014, ce problème avait été résolu. Il est maintenant possible d'importer des fichiers css directement dans votre fichier sass. Ce qui suit PR dans github résout le problème.

La syntaxe est la même que maintenant - @import "your/path/to/the/file", sans extension après le nom du fichier. Cela importera votre fichier directement. Si vous ajoutez *.css à la fin, cela se traduira par la règle css. @import url(...).

Si vous utilisez certains "nouveaux" groupeurs de modules "sophistiqués" tels que webpack , vous devrez probablement utiliser ~ au début du chemin. Donc, si vous voulez importer le chemin suivant node_modules/bootstrap/src/core.scss vous écrirez quelque chose comme
@import "~bootstrap/src/core".

REMARQUE:
Il semble que cela ne fonctionne pas pour tout le monde. Si votre interprète est basé sur libsass il devrait fonctionner correctement (checkout this ). J'ai testé avec @import sur node-sass et tout fonctionne bien. Malheureusement, cela fonctionne et ne fonctionne pas sur certaines instances Ruby.

364
tftd

Vous devez ajouter un trait de soulignement au fichier css à inclure et basculer son extension en scss (ex: _yourfile.scss). Ensuite, il vous suffit de l'appeler de cette façon:

@import "yourfile";

Et il inclura le contenu du fichier au lieu d'utiliser la directive standard @import de CSS.

256
David Morales

Cela a été implémenté et fusionné à partir de la version 3.2 ( pull # 754 fusionné le 2 janv. 2015 pour libsass, les problèmes à l'origine étaient définis ici: sass# 19# 556 , libsass# 318 ).

Pour abréger l'histoire longue, la syntaxe est la suivante:

  1. importer (inclure) le fichier CSS brut

    la syntaxe est sans .css extension à la fin (il en résulte une lecture réelle de s[ac]ss|css partiel et son inclusion en ligne dans SCSS/SASS):

    @import "path/to/file";

  2. importer le fichier CSS de manière traditionnelle

    La syntaxe de est la même que celle utilisée, avec .css extension à la fin (résultats de @import url("path/to/file.css"); dans votre CSS compilé):

    @import "path/to/file.css";

Et c'est sacrément bon: cette syntaxe est élégante et laconique, avec une compatibilité ascendante! Cela fonctionne très bien avec libsass et node-sass.

__

Pour éviter d'autres spéculations dans les commentaires, écrivez ceci explicitement: Ruby basé Sass a toujours cette fonctionnalité unimplemented après 7 ans de discussions. Au moment de la rédaction de cette réponse, il est promis qu’en 4.0, il existera un moyen simple d’y parvenir, probablement à l’aide de @use . Il semble qu'il y aura une mise en œuvre très bientôt, le nouveau "prévu" La balise "Proposition acceptée" a été attribuée à numéro 556 et à la nouvelle fonctionnalité @use.

La réponse peut être mise à jour dès que quelque chose change .

243
Farside

Bonne nouvelle à tous, Chris Eppstein a créé un plugin Compass avec une fonctionnalité d'importation en ligne css:

https://github.com/chriseppstein/sass-css-importer

Maintenant, importer un fichier CSS est aussi simple que:

@import "CSS:library/some_css_file"
36
Rafal Pastuszak

Si vous avez un fichier .css que vous ne souhaitez pas modifier, ne modifiez pas non plus son extension en .scss (, par exemple, ce fichier provient d'un projet forké que vous ne gérez pas. ), vous pouvez toujours créer un lien symbolique puis l'importer dans votre .scss.

Crée un lien symbolique:

ln -s path/to/css/file.css path/to/sass/files/_file.scss


Importe un fichier lien symbolique dans une cible .scss:

@import "path/to/sass/files/file";


Votre fichier de sortie cible .css contiendra le contenu du fichier symlink .scss importé, et non une règle d'importation CSS ( mentionnée par @yaz avec le plus grand nombre de votes de commentaire. ). Et vous n'avez pas de fichiers dupliqués avec des extensions différentes, ce qui signifie que toute mise à jour effectuée dans le fichier initial .css est immédiatement importée dans votre sortie cible.

Le lien symbolique (également un lien symbolique ou un lien symbolique) est un type spécial de fichier qui contient une référence à un autre fichier sous la forme d'un chemin absolu ou relatif et qui affecte la résolution du chemin d'accès.
- http://en.wikipedia.org/wiki/Symbolic_link

18
Nik Sumeiko

Vous pouvez utiliser un tiers importer pour personnaliser la sémantique @import.

node-sass-import-once , qui fonctionne avec node-sass (pour Node.js) peut importer en ligne des fichiers CSS.

Exemple d'utilisation directe:

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

Exemple grunt-sass config:

var importOnce = require("node-sass-import-once");
grunt.loadNpmTasks("grunt-sass");

grunt.initConfig({
  sass: {
    options: {
      sourceMap: true,
      importer: importOnce
    },
    dev: {
      files: {
        "dist/style.css": "scss/**/*.scss"
      }
    }
  });

Notez que node-sass-import-once ne peut pas actuellement importer les partiels Sass sans un soulignement principal explicite. Par exemple avec le fichier partials/_partial.scss:

  • @import partials/_partial.scss réussit
  • @import * partials/partial.scss échoue

En général, sachez qu'un importateur personnalisé peut changer toute sémantique d'importation . Lisez la documentation avant de commencer à l'utiliser.

5
joews

Si je suis correct, css est compatible avec scss, vous pouvez donc modifier l'extension d'un css en scss et il devrait continuer à fonctionner. Une fois l'extension modifiée, vous pouvez l'importer et elle sera incluse dans le fichier.

Si vous ne le faites pas, Sass utilisera le css @import, ce que vous ne voulez pas.

4
Pickels

J'ai imaginé une façon élégante de faire les Rails. Commencez par renommer votre fichier .scss en .scss.erb, puis utilisez la syntaxe suivante (exemple pour élément CSS CSS de highlight_js-Rails4 ):

@import "<%= asset_path("highlight_js/github") %>";

Pourquoi vous ne pouvez pas héberger le fichier directement via SCSS :

Faire un @import dans SCSS fonctionne très bien pour les fichiers CSS tant que vous utilisez explicitement le chemin complet d'une manière ou d'une autre. En mode de développement, Rails s sert des éléments sans les compiler, donc un chemin comme celui-ci fonctionne ...

@import "highlight_js/github.css";

... parce que le chemin hébergé est littéralement /assets/highlight_js/github.css. Si vous cliquez avec le bouton droit de la souris sur la page et sur "Voir la source", puis cliquez sur le lien de la feuille de style avec le @import ci-dessus, vous verrez une ligne qui ressemble à ceci:

@import url(highlight_js/github.css);

Le moteur SCSS convertit "highlight_js/github.css" en url(highlight_js/github.css). Cela fonctionnera à merveille jusqu'à ce que vous décidiez de l'exécuter en production, où les actifs sont précompilés et dont le nom contient un hachage. Le fichier SCSS sera toujours résolu en un /assets/highlight_js/github.css statique qui n’a pas été précompilé et n’existe pas en production.

Comment cette solution fonctionne:

Premièrement, en déplaçant le fichier .scss vers .scss.erb, nous avons transformé le SCSS en un modèle pour Rails. Maintenant, chaque fois que nous utilisons les balises de modèle <%= ... %>, le processeur de modèle Rails remplacera ces extraits de code par la sortie du code (comme tout autre modèle).

La mention asset_path("highlight_js/github") dans le fichier .scss.erb fait deux choses:

  1. Déclenche la tâche rake assets:precompile pour précompiler le fichier CSS approprié.
  2. Génère une URL qui reflète correctement l'actif, quel que soit l'environnement Rails.

Cela signifie également que le moteur SCSS n’analyse même pas le fichier CSS; c'est juste héberger un lien vers ça! Donc, il n'y a pas de correctifs Hokey Monkey ou de solutions de contournement grossières. Nous servons un actif CSS via SCSS comme prévu et utilisons l'URL de cet actif CSS comme Rails. Sucré!

2
Synthead

Contournement simple:

Tous, ou presque tous les fichiers css peuvent également être interprétés comme s'il s'agissait de scss. Cela permet également de les importer dans un bloc. Renommez le fichier css en scss et importez-le.

Dans ma configuration actuelle, je fais ce qui suit:

Premièrement, je copie le fichier .css dans un fichier temporaire, cette fois avec l’extension .scss. Exemple de configuration:

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

Ensuite, vous pouvez importer le fichier .scss à partir de votre scss parent (dans mon exemple, il est même importé dans un bloc):

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

Remarque: cela pourrait être dangereux, car le css sera analysé plusieurs fois. Vérifiez votre css original pour voir s'il contient un artefact interprétable par scss (c'est improbable, mais si cela se produit, le résultat sera difficile à déboguer et dangereux).

0
peterh