Importer un fichier CSS ordinaire dans un fichier SCSS?


509

Est-il possible d'importer un fichier CSS normal avec la @importcommande de Sass ? Bien que je n'utilise pas toute la syntaxe SCSS de sass, j'apprécie toujours la combinaison / compression des fonctionnalités, et j'aimerais pouvoir l'utiliser sans renommer tous mes fichiers en * .scss


1
Oui, il existe un moyen: supprimez simplement l'extension '.css' dans le chemin du fichier css dans l'instruction @input :) (fonctionne pour la version sass> = 3.2)
Kamil Kiełczewski

À partir de 2018, l'utilisation de SASS@import dans un fichier CSS normal devrait simplement générer un CSS @import régulier . Cela signifie une demande HTTP de plus et aucune combinaison ou compression. Si certaines implémentations se comportent différemment, je dirais que c'est une fonctionnalité non standard qui diffère de la spécification du langage.
Álvaro González

Réponses:


215

Il semble que cela ne soit pas implémenté au moment de la rédaction de cet article:

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

Pour libsass (implémentation C / C ++), l'importation fonctionne de *.cssla même manière que pour les *.scssfichiers - 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 l'implémentation de Ruby (sass gem)


23
@kleinfreund pas vrai avec Sass 3.3.1. L' @importinstruction n'est pas modifiée du tout et apparaît dans le fichier CSS résultant, Sass n'inclut pas le fichier CSS référencé comme le demande @GSto. Il semble qu'il sera implémenté dans Sass 3.4 ou 4.0
fregante

1
Si vous utilisez Gulp ou Grunt, utilisez simplement un outil différent pour importer vos fichiers CSS, c'est plus facile et cela fonctionne maintenant . J'utilise gulp-import-css , je ne sais pas quel est l'équivalent de Grunt.
fregante

3
Cela fonctionne avec libsassau moins. Voir la réponse stackoverflow.com/questions/7111610/… et PR github.com/sass/libsass/pull/754
ivn

"L'importation fonctionne de *.cssla même manière que pour les *.cssfichiers" est une tautologie. Vous vouliez que l'un d'entre eux soit *.scss, non?
underscore_d

1
À partir de la version 3.5.3, libsass avertit qu'il s'agit d'un comportement non standard et qu'il ne faut pas s'y fier. (Au lieu de cela "Utilisez un importateur personnalisé pour conserver ce comportement.") Github.com/sass/libsass/releases/tag/3.5.3
iX3

383

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

Je veux simplement souligner qu'en décembre 2014, ce problème a été résolu. Il est désormais possible d'importer des cssfichiers directement dans votre fichier sass. Le PR suivant 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 cssrègle @import url(...).

Dans le cas où vous utilisez certains des nouveaux bundlers de modules "fantaisistes" tels que webpack , vous devrez probablement utiliser use ~au début du chemin. Donc, si vous voulez importer le chemin suivant, node_modules/bootstrap/src/core.scssvous é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 libsasselle devrait fonctionner correctement (consultez ceci ). J'ai testé l'utilisation @importde node-sass et cela fonctionne bien. Malheureusement, cela fonctionne et ne fonctionne pas sur certaines instances de rubis.


1
Cela semble être implémenté dans libsassmais lorsque vous utilisez l'implémentation ruby ​​de sass, il semble que cette syntaxe fonctionne, mais seulement si vous en avez sass-css-importerbesoin. C'est du moins ce que je vois. Quelqu'un d'autre peut-il confirmer cela?
bsara

5
Êtes-vous sûr de disposer de la dernière version de sass? J'utilise cette syntaxe depuis un certain temps et cela fonctionne bien avec les deux rubyet les nodejsinterprètes. Avez-vous vérifié si vous ne placez pas d'extension après le nom du fichier? La syntaxe correcte est @import "path/to/style/file(sans l' .cssextension)
tftd

4
J'utilise ruby ​​sass v3.4.18 (avec Jekyll) selon mon Gemfile.lock. Toujours en train de voir Error: File to import not found or unreadable: cssdep/cssfile. Si je crée un cssdep/cssfile.scssça marche soudainement. Ce n'est donc pas un problème de chemin, pour une raison quelconque, je ne peux toujours pas inclure les fichiers '.css' de SASS :(
thom_nic

1
ruby -v: ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v: Sass 3.4.17 (Selective Steve)Ne fonctionne pas ici
Cyril Chapon

5
Merci pour ça! J'ai pu importer normalize.css en utilisant node-sass avec@import "node_modules/normalize.css/normalize";
Nick

260

Vous devez ajouter un trait de soulignement au fichier css à inclure et basculer son extension sur 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 CSS @import standard.


1
C'est peut-être quelque chose à propos des conventions et des normes.
David Morales

70
Le trait de soulignement sert à l'empêcher d'être compilé dans un fichier distinct.
Jonah

4
Au cas où quelqu'un se poserait la question, cela fonctionne parce que la syntaxe SCSS de Sass est un surensemble de CSS3. C'est aussi pourquoi le point-virgule est nécessaire.
Jacob Wan

46
Vous ne pouvez pas modifier l'extension d'un fichier CSS de fournisseur par exemple.
Slava Fomin II

7
Si c'est sur votre ordinateur / serveur, vous pouvez! Et il y a aussi des liens symboliques si vous ne le souhaitez pas.
ste

260

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

Pour abréger la longue histoire, la syntaxe suivante:

  1. importer (inclure) le fichier CSS brut

    la syntaxe est sans.css extension à la fin (entraîne une lecture réelle du partiel s[ac]ss|csset l'inclut en ligne dans SCSS / SASS):

    @import "path/to/file";

  2. importer le fichier CSS de manière traditionnelle

    la syntaxe va de façon traditionnelle, avec l' .cssextension à la fin (résultats @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, plus rétrocompatible! Il fonctionne parfaitement avec libsasset node-sass.

__

Pour éviter d'autres spéculations dans les commentaires, écrivez ceci explicitement: Sass basé sur Ruby a toujours cette fonctionnalité non implémentée après 7 ans de discussions. Au moment d'écrire cette réponse, il est promis qu'en 4.0, il y aura un moyen simple d'accomplir cela, probablement avec l'aide de . Il semble qu'il y aura une mise en œuvre très bientôt, la nouvelle « prévu » tag « Proposition acceptée » a été attribué à la question # 556 et la nouvelle fonction.@use@use

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


3
juste pour clarifier, l'importation du css en tant que sass a fonctionné comme ceci pour moi: @import url ("path / to / file-without-css-extension");
Craig Wayne

1
Cela ne fonctionne pas réellement dans la version rubis de sass. Par exemple, la commande: sass myFile.scss: output.css échoue avec une importation css, mais fonctionne lorsque vous modifiez l'extension du fichier .css en .scss. Exécuter avec la dernière version au moment de la rédaction de ce commentaire: 3.4.22 / Selective Steve. Cela affecte également tous les exécuteurs de tâches utilisant la version ruby, comme grunt-contrib-sass.
ansorensen

@ansorensen, je pense qu'il y a confusion de votre part. Qu'entendez-vous par «fonctionne lorsque vous changez l'extension du fichier .css en .scss» ? L'idée était exactement sur les fichiers CSS normaux et deux façons de travailler avec eux (ne pas confondre avec l'importation de SCSS). Veuillez lire une fois de plus la question et la réponse.
Farside

@Farside Aucune confusion. La syntaxe d'importation «chemin / vers / fichier» ne fonctionne pas dans la dernière version de la gemme sass dans Ruby. Lorsque j'exécute sass avec une importation, l'importation fonctionne correctement lorsque le fichier sur le chemin importé a une extension .scss et échoue lorsque le fichier a un .css. La question demande une importation de css dans scss, et vous fournissez une réponse pour lib-sass & node-sass. Je commente que cette fonctionnalité ne se trouve pas dans les versions rubis de sass.
ansorensen

1
@ansorensen, omg, tant de texte de votre part ... J'étais explicite, et ne confondez personne. Node-sassest une bibliothèque Node.js LibSass (la version C de Sass). Pas une seule mention libsassou node-sassbasée sur Ruby, pas une seule mention de la version RUBY uniquement dans la question d'origine. Veuillez lire attentivement avant d'écrire 3 commentaires d'affilée la prochaine fois. J'ai toutes les références: selon le numéro # 193, il n'est toujours pas implémenté après 5 ans de discussion pour la version Ruby, ils promettent cette fonctionnalité uniquement quand ver. 4.0 sera disponible.
Farside

37

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

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

Maintenant, importer un fichier CSS est aussi simple que:

@import "CSS:library/some_css_file"

3
Échec en raison de l'utilisation d'un point de départ obsolète. "Ce qui est, mais ne peut jamais l'être ..." Je suis sûr que c'était génial quand il est sorti, mais il a besoin d'une mise à jour pour fonctionner à nouveau, ou vous devez installer des plugins obsolètes. Merci, C§
CSS

18

Si vous avez un .cssfichier que vous ne souhaitez pas modifier, ni ne changez son extension .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 de lien symbolique dans une cible .scss:

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


Votre .cssfichier de sortie cible va contenir le contenu du .scssfichier de lien symbolique importé , pas une règle d'importation CSS ( mentionnée par @yaz avec les votes de commentaires les plus élevés ). 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 .cssfichier initial est immédiatement importée dans votre sortie cible.

Le lien symbolique (également lien symbolique ou lien logiciel) 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 nom de chemin.
- http://en.wikipedia.org/wiki/Symbolic_link


9
L'ajout d'un lien symbolique n'est pas une solution très portable (c'est-à-dire plusieurs développeurs ou systèmes de construction)
LocalPCGuy

@LocalPCGuy c'est le cas, lorsque les deux fichiers ( .csset le lien symbolique créé) sont disponibles pour tout le monde via un référentiel partagé, par exemple.
Nik Sumeiko

Je viens de le faire et j'allais répondre à propos des liens sym sur ce fil, mais heureux qu'il soit déjà là! Il est vrai que ce besoin est rare, mais ma situation impliquait de ne pas vouloir modifier du tout le fichier CSS (car c'était un fichier bower), donc construire un lien symbolique et importer cela fonctionnait parfaitement.
Aaron Krauss

2
Pour les utilisateurs de Windows , la même fonctionnalité aurait une syntaxe différente mklink /H <link> <target>, et elle s'appelle lien dur @mrsafraz.
Farside

5

Vous pouvez utiliser un tiers importerpour personnaliser la @importsémantique.

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

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 de configuration grunt-sass :

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 des partiels Sass sans un soulignement 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 modifier toute sémantique d'importation. Lisez les documents avant de commencer à l'utiliser.


4

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

Si vous ne le faites pas, sass utilisera le css @import qui est quelque chose que vous ne voulez pas.


16
malheureusement, les fichiers css importés sont parfois hors de votre contrôle, comme dans une bibliothèque qui regroupe certains actifs statiques.
Eric Drechsel

2

J'ai trouvé une façon élégante de faire Rails. Tout d'abord, renommez votre .scssfichier en .scss.erb, puis utilisez une syntaxe comme celle-ci (exemple pour l' élément CSS CSS highlight_js-rails4 gem ):

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

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

Faire un @importdans 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 développement, rails ssert les actifs sans les compiler, donc un chemin comme celui-ci fonctionne ...

@import "highlight_js/github.css";

... car le chemin hébergé est littéralement /assets/highlight_js/github.css. Si vous faites un clic droit sur la page et "voir la source", puis cliquez sur le lien pour la feuille de style avec ce qui précède @import, vous verrez une ligne là-dedans qui ressemble à:

@import url(highlight_js/github.css);

Le moteur SCSS se traduit "highlight_js/github.css"par url(highlight_js/github.css). Cela fonctionnera parfaitement jusqu'à ce que vous décidiez d'essayer de l'exécuter en production où les ressources sont précompilées ont un hachage injecté dans le nom du fichier. Le fichier SCSS sera toujours résolu en un état statique /assets/highlight_js/github.cssqui n'a pas été précompilé et qui n'existe pas en production.

Comment fonctionne cette solution:

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

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

  1. Déclenche la rake assets:precompiletâche 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; il s'agit simplement d'héberger un lien vers celui-ci! Il n'y a donc pas de correctifs de singe hokey ou de solutions de contournement grossières. Nous servons un actif CSS via SCSS comme prévu, et utilisons une URL vers cet actif CSS comme prévu par Rails. Doux!


Pour moi, la solution semble un peu louche et ressemble plus à un hack. Mais c'est un bon travail d'enquête!
Farside

0

Solution simple:

Tout ou presque tout fichier css peut également être interprété comme s'il s'agissait de scss. Il permet également de les importer dans un bloc. Renommez le css en scss et importez-le.

Dans ma configuration actuelle, je fais ce qui suit:

Je copie d'abord le fichier .css dans un fichier temporaire, cette fois avec l'extension .scss. Exemple de configuration de Grunt:

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 depuis 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 peut être dangereux, car il en résultera que le css sera analysé plusieurs fois. Vérifiez votre css d'origine pour qu'il contient tout artefact interprétable par scss (il est improbable, mais si cela se produit, le résultat sera difficile à déboguer et dangereux).


-3

Il est désormais possible d'utiliser:

@import 'CSS:directory/filename.css';

3
seulement si gem sass-css-importerest installé, sass est appelé avec switch -r sass-css-importeret .cssest omis du chemin du fichier
Bernhard Döbler

-4

Je peux confirmer que cela fonctionne:

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :scss)
  end
end

view_context = ActionView::Base.new
css = Sass::Engine.new(
  template,
  syntax:     :scss,
  cache:      false,
  load_paths: Rails.application.assets.paths,
  read_cache: false,
  filesystem_importer: CSSImporter # Relevant option,

  sprockets:  {
    context:     view_context,
    environment: Rails.application.assets
  }
).render

Crédit à Chriss Epstein: https://github.com/sass/sass/issues/193


1
Comment pouvez-vous l'utiliser dans votre fichier scss?
Adrian Ber

-10

Facile.

@import "chemin / vers / fichier.css";


6
J'ai essayé cela, mais il ne tirera pas le contenu du fichier dans celui-ci lors de la compression, il conservera simplement la ligne @import.
GSto

1
Réponse la moins bien notée, mais ironiquement, cela semble être la bonne façon, maintenant. Inclure le suffixe est la bonne chose à faire.
Wyck
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.