Importare file CSS regolari in file SCSS?

Esiste un modo per importare un normale file CSS con il @importcomando di Sass ? Anche se non sto usando tutta la sintassi SCSS di sass, mi diverto ancora a combinare / comprimere le funzionalità e vorrei poterlo usare senza rinominare tutti i miei file in * .scss

Sembra che questo non sia implementato, al momento della stesura di questo scritto:

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

Per libsass (implementazione C / C ++), l'importazione funziona *.cssallo stesso modo dei *.scssfile - basta omettere l'estensione:

@import "path/to/file";

Questo verrà importato path/to/file.css.

Vedi questa risposta per ulteriori dettagli.

Vedi questa risposta per l'implementazione di Ruby (sass gem)

Dopo aver avuto lo stesso problema, mi sono confuso con tutte le risposte qui e i commenti sul repository di sass in github.

Voglio solo sottolineare che a dicembre 2014 questo problema è stato risolto. Ora è possibile importare cssfile direttamente nel tuo file sass. Il seguente PR in github risolve il problema.

La sintassi è la stessa di adesso - @import "your/path/to/the/file", senza estensione dopo il nome del file. Questo importerà direttamente il tuo file. Se lo aggiungi *.cssalla fine, si tradurrà nella cssregola @import url(...).

Nel caso in cui tu stia usando alcuni dei nuovi "eleganti" bundle di moduli come il webpack , probabilmente dovrai usare l'uso ~all'inizio del percorso. Quindi, se vuoi importare il seguente percorso, node_modules/bootstrap/src/core.scssdovresti scrivere qualcosa del genere
@import "~bootstrap/src/core".

NOTA:
sembra che questo non funzioni per tutti. Se il tuo interprete si basa su libsassquesto dovrebbe funzionare bene (controlla questo ). Ho provato usando @importsu node-sass e funziona benissimo. Sfortunatamente questo funziona e non funziona su alcune istanze ruby.

È necessario anteporre un carattere di sottolineatura al file css da includere e passare la sua estensione a scss (es:) _yourfile.scss. Quindi devi solo chiamarlo in questo modo:

@import "yourfile";

E includerà il contenuto del file, invece di usare la direttiva CSS @import standard.

Questo è stato implementato e unito a partire dalla versione 3.2( pull # 754 unito il 2 gennaio 2015 per libsass, i problemi originariamente sono stati definiti qui: sass# 193 # 556 , libsass# 318 ).

Per farla breve, la sintassi nel prossimo:

1. per importare (includere) il file CSS non elaborato

   la sintassi è senza.css estensione alla fine (risulta nella lettura effettiva del parziale s[ac]ss|csse include inline in SCSS / SASS):

   @import "path/to/file";

2. per importare il file CSS in modo tradizionale

   la sintassi va in modo tradizionale, con .cssestensione alla fine (risultati @import url("path/to/file.css");nel CSS compilato):

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

Ed è dannatamente buono: questa sintassi è elegante e laconica, oltre che retrocompatibile! Funziona in modo eccellente con libsasse node-sass.

__

Per evitare ulteriori speculazioni nei commenti, scrivendo esplicitamente: Rubino basato Sass ha ancora questa funzione non implementato dopo 7 anni di discussioni. Al momento di scrivere questa risposta, è stato promesso che in 4.0 ci sarà un modo semplice per ottenere questo risultato, probabilmente con l'aiuto di @use. Sembra che ci sarà un'implementazione molto presto, il nuovo tag "pianificato" "Proposta accettata" è stato assegnato per il numero # 556 e la nuova @usefunzionalità.

la risposta potrebbe essere aggiornata non appena qualcosa cambia .

Buone notizie a tutti, Chris Eppstein ha creato un plugin bussola con funzionalità di importazione CSS in linea:

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

Ora, importare un file CSS è facile come:

@import "CSS:library/some_css_file"

Se si dispone di un .cssfile che non si desidera modificare, né di modificarne l'estensione .scss( ad esempio, questo file proviene da un progetto biforcuto che non si mantiene ), è sempre possibile creare un collegamento simbolico e quindi importarlo nel proprio .scss.

Crea un collegamento simbolico:

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

Importa file symlink in una destinazione .scss:

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

Il .cssfile di output di destinazione conterrà i contenuti del .scssfile symlink importato , non una regola di importazione CSS ( menzionata da @yaz con il punteggio più alto dei commenti ). E non hai file duplicati con estensioni diverse, il che significa che qualsiasi aggiornamento effettuato all'interno del .cssfile iniziale viene immediatamente importato nell'output di destinazione.

Il collegamento simbolico (anche il collegamento simbolico o soft link) è un tipo speciale di file che contiene un riferimento a un altro file sotto forma di un percorso assoluto o relativo e che influisce sulla risoluzione del percorso.
- http://en.wikipedia.org/wiki/Symbolic_link

È possibile utilizzare una terza parte importerper personalizzare la @importsemantica.

node-sass-import-once , che funziona con node-sass (per Node.js) può incorporare i file CSS di importazione.

Esempio di utilizzo diretto:

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

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

Esempio di configurazione 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"
      }
    }
  });

Si noti che node-sass-import-once non può attualmente importare i parziali di Sass senza un carattere di sottolineatura iniziale esplicito. Ad esempio con il file partials/_partial.scss:

• @import partials/_partial.scss riesce
• @import * partials/partial.scss non riesce

In generale, tenere presente che un importatore personalizzato potrebbe modificare qualsiasi semantica di importazione. Leggi i documenti prima di iniziare a usarlo.

Se ho ragione css è compatibile con scss quindi puoi cambiare l'estensione di un css in scss e dovrebbe continuare a funzionare. Una volta modificata l'estensione, è possibile importarla e verrà inclusa nel file.

Se non lo fai, sass userà il css @import che è qualcosa che non vuoi.

Ho trovato un modo elegante e simile a Rails per farlo. Innanzitutto, rinominare il .scssfile in .scss.erb, quindi utilizzare la sintassi in questo modo (esempio per l' asset CSS highlight highlight_js-rails4 ):

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

Perché non è possibile ospitare il file direttamente tramite SCSS :

Fare uno @importin SCSS funziona bene per i file CSS purché usi esplicitamente il percorso completo in un modo o nell'altro. In modalità di sviluppo, rails sserve le risorse senza compilarle, quindi un percorso come questo funziona ...

@import "highlight_js/github.css";

... perché il percorso ospitato è letteralmente /assets/highlight_js/github.css. Se fai clic con il pulsante destro del mouse sulla pagina e "visualizza sorgente", quindi fai clic sul collegamento per il foglio di stile con quanto sopra @import, vedrai una riga che appare come:

@import url(highlight_js/github.css);

Il motore SCSS si traduce "highlight_js/github.css"in url(highlight_js/github.css). Questo funzionerà a dovere fino a quando non decidi di provare a eseguirlo in produzione in cui le risorse sono precompilate hanno un hash iniettato nel nome del file. Il file SCSS verrà comunque risolto in uno statico /assets/highlight_js/github.cssche non è stato precompilato e non esiste in produzione.

Come funziona questa soluzione:

Innanzitutto, spostando il .scssfile in .scss.erb, abbiamo effettivamente trasformato SCSS in un modello per Rails. Ora, ogni volta che usiamo<%= ... %> tag modello, il processore del modello Rails sostituirà questi frammenti con l'output del codice (proprio come qualsiasi altro modello).

Dichiarare asset_path("highlight_js/github")nel .scss.erbfile fa due cose:

1. Attiva l' rake assets:precompileattività per precompilare il file CSS appropriato.
2. Genera un URL che riflette in modo appropriato la risorsa indipendentemente dall'ambiente Rails.

Questo significa anche che il motore SCSS non sta nemmeno analizzando il file CSS; sta solo ospitando un link ad esso! Quindi non ci sono patch di scimmie hokey o soluzioni alternative grossolane. Stiamo servendo una risorsa CSS tramite SCSS come previsto e utilizzando un URL per detta risorsa CSS come previsto da Rails. Dolce!

Soluzione semplice:

Tutti o quasi tutti i file CSS possono essere interpretati anche come se fossero scss. Inoltre consente di importarli all'interno di un blocco. Rinomina il CSS in SCSS e importalo così.

Nella mia configurazione effettiva faccio quanto segue:

Per prima cosa copio il file .css in uno temporaneo, questa volta con l'estensione .scss. Grunt esempio di configurazione:

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

Quindi puoi importare il file .scss dal tuo scss padre (nel mio esempio, è persino importato in un blocco):

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

Nota: questo potrebbe essere pericoloso, poiché risulterà efficacemente che il css verrà analizzato più volte. Controlla il tuo CSS originale per verificare che contenga qualsiasi artefatto interpretabile da scss (è improbabile, ma se succede, il risultato sarà difficile da debug e pericoloso).

Ora è possibile usare:

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

Posso confermare che funziona:

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

Ringraziamo Chriss Epstein: https://github.com/sass/sass/issues/193

Semplice.

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