Importer un fichier CSS ordinaire dans un fichier SCSS?

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

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)

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.

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.

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 .

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"

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

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.

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.

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!

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).

Il est désormais possible d'utiliser:

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

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

Facile.

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