Importer le fichier CSS régulier dans le fichier SCSS?

après avoir eu le même problème, j'ai été confus avec toutes les réponses ici et les commentaires sur le dépôt de sass dans github.

je veux juste souligner qu'en décembre 2014, ce problème a été résolu. Il est maintenant possible d'importer des fichiers css directement dans votre fichier sass. Le PR dans github résout la question.

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

dans le cas où vous utilisez certains des nouveaux bundlers de module" fantaisie "tels que webpack , vous aurez probablement besoin d'utiliser ~ au début du chemin. Donc, si vous voulez importer le chemin suivant node_modules/bootstrap/src/core.scss vous écririez quelque chose comme

@import "~bootstrap/src/core" .

NOTE:

On dirait que ça ne marche pas pour tout le monde. Si votre interprète est basé sur libsass il devrait travailler très bien (check-out ce ). J'ai testé avec @import sur node-sass et ça marche très bien. Malheureusement cela fonctionne et ne fonctionne pas sur certaines instances ruby.

vous devez préparer un underscore vers le fichier css à inclure, et basculer son extension vers scss (ex: _yourfile.scss ). Il suffit de l'appeler ainsi:

@import "yourfile";

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

cela a été mis en œuvre et fusionné à partir de la version 3.2 ( pull #754 fusionné sur 2 Jan 2015 pour libsass , les questions originalement ont été définies ici: sass #193 #556 , libsass #318 ).

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

1. pour importer (inclure) le fichier CSS brut

   la syntaxe est sans .css extension à la fin (résultats en lecture réelle de partielle s[ac]ss|css et inclure en ligne à SCSS/SASS):

   @import "path/to/file";

2. pour importer le fichier CSS de manière traditionnelle

   la syntaxe va de manière traditionnelle, 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, Plus rétro compatible! Il fonctionne parfaitement avec libsass et node-sass .

_ _

pour éviter d'autres spéculations dans les commentaires, en écrivant ceci explicitement: Ruby basé Sass a toujours Cette caractéristique non mis en œuvre après 7 années de discussions. Au moment d'écrire cette réponse, il est promis que dans 4.0 il y aura un moyen simple d'accomplir ceci, probablement avec l'aide de @use . Il semble qu'il y aura une mise en œuvre très bientôt, la nouvelle étiquette " prévu " " proposition acceptée "a été assignée pour le numéro 556 et le nouveau @use caractéristique.

réponse pourrait être mis à jour, dès que quelque chose change .

bonnes nouvelles tout le monde, Chris Eppstein a créé un plugin compass avec la fonctionnalité d'importation css en ligne:

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

maintenant, importer un fichier CSS est aussi facile que:

@import "CSS:library/some_css_file"

si vous avez un fichier .css que vous ne souhaitez pas modifier, ni changer son extension en .scss ( par exemple, ce fichier provient d'un projet bifurqué que vous ne maintenez pas ), vous pouvez toujours créer un lien symbolique et ensuite l'importer dans votre .scss .

crée un lien symbolique:

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

Importations lien symbolique du fichier dans une cible .scss :

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

"votre sortie cible .css le fichier va contenir le contenu du lien symbolique importé .scss Fichier, pas une règle d'importation CSS ( mentionné par @yaz avec le plus haut commentaire votes ). Et vous n'avez pas de fichiers dupliqués avec des extensions différentes, ce qui signifie que toute mise à jour effectuée à l'intérieur du fichier .css initial est immédiatement importée dans votre sortie cible.

Le lien symbolique (également lien symbolique ou lien souple) est un type de fichier spécial qui contient une référence à un autre fichier sous la forme d'un absolu ou chemin relatif et qui affecte la résolution du chemin.

– http://en.wikipedia.org/wiki/Symbolic_link

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

nœud-sass-import-une fois , qui fonctionne avec des nœud-sass (pour le Nœud.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"
      }
    }
  });

noter que node-sass-import-once ne peut pas actuellement importer des partiels Sass sans un underscore dirigeant explicite. Par exemple avec le fichier partials/_partial.scss :

• @import partials/_partial.scss succède
• @import * partials/partial.scss échoue

en général, sachez qu'un importateur en douane peut changer n'importe quelle sémantique d'importation. Lisez la documentation avant de commencer à l'utiliser.

si j'ai raison css est compatible avec scss de sorte que vous pouvez changer l'extension d'un css à scss et il devrait continuer à fonctionner. Une fois que vous modifiez l'extension, vous pouvez l'importer et il sera inclus dans le fichier.

si vous ne le faites pas, sass utilisera css @import, ce que vous ne voulez pas.

j'ai trouvé un moyen élégant, comme des Rails pour le faire. Tout d'abord, renommez votre fichier .scss en .scss.erb , puis utilisez la syntaxe suivante (exemple pour highlight_js-rails4 gem CSS asset ):

@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 développement, rails s sert des actifs 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 faites un clic droit sur la page et "view source", puis cliquez sur le lien pour la feuille de style avec la @import ci-dessus , vous verrez une ligne qui ressemble à:

@import url(highlight_js/github.css);

le moteur SCSS traduit "highlight_js/github.css" en url(highlight_js/github.css) . Cela fonctionne à merveille jusqu'à ce que vous décidiez d'essayer de l'exécuter dans la production où les actifs sont précompilés avoir un hachage injecté dans le nom de fichier. Le fichier SCSS se résoudra toujours à un /assets/highlight_js/github.css statique qui n'a pas été précompilé et n'existe pas en production.

comment cette solution fonctionne:

tout d'abord , en déplaçant le fichier .scss vers .scss.erb , nous avons effectivement transformé le SCSS en un modèle pour les Rails. Maintenant, chaque fois que nous utilisons <%= ... %> template tags, Le processeur de Template de Rails remplacera ces snippets par la sortie du code (comme tout autre template).

L'énoncé asset_path("highlight_js/github") dans le dossier .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 de manière appropriée le bien indépendamment de L'environnement Rails.

cela signifie également que le moteur SCSS n'analyse même pas le fichier CSS; il héberge simplement un lien vers celui-ci! Donc il n'y a pas de patches de singe ou de solutions de rechange dégueulasses. Nous servons un actif CSS via SCSS comme prévu, et en utilisant une URL pour ledit actif CSS comme Rails prévus. Sweet!

solution simple:

tous, ou presque tous les fichiers css peuvent aussi être interprétés comme s'ils étaient scss. Il permet également de les importer dans un bloc. Renommer le css en scss, et l'importer ainsi.

dans ma configuration actuelle je fais ce qui suit:

D'abord je copie le .fichier css dans un temporaire, cette fois avec .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"
            }
        ]
    }
}

alors vous pouvez importer le .fichier scss 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...
}

Note: cela pourrait être dangereux, parce qu'il en résultera effectivement que le css sera analysé plusieurs fois. Vérifiez que votre css original contient n'importe quel artefact interprétable par scss (c'est improbable, mais si cela arrive, le résultat sera difficile à déboguer et dangereux).

sur sass 3.5.5 ça marche

@import url ('yourStyle.css')

il est maintenant possible d'utiliser:

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

je peux confirmer 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 à Chris Epstein: https://github.com/sass/sass/issues/193

Simple.

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