Impor file CSS biasa dalam file SCSS?

509

Apakah ada cara untuk mengimpor file CSS biasa dengan @importperintah Sass ? Meskipun saya tidak menggunakan semua sintaks SCSS dari sass, saya masih menikmati itu menggabungkan / mengompresi fitur, dan ingin dapat menggunakannya tanpa mengubah nama semua file saya ke * .scss

GSto
sumber
1
Ya, ada caranya: hapus saja ekstensi '.css' di jalur file css di @input statement :) (berfungsi untuk versi sass> = 3.2)
Kamil Kiełczewski
Pada 2018, menggunakan SASS@import dalam file CSS biasa seharusnya hanya menghasilkan impor CSS biasa . Itu berarti satu permintaan HTTP lagi dan tidak ada penggabungan atau kompresi. Jika beberapa implementasi berperilaku berbeda maka saya akan mengatakan itu adalah fitur non-standar yang menyimpang dari spesifikasi bahasa.
Álvaro González

Jawaban:

215

Sepertinya ini belum diterapkan, pada saat penulisan ini:

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

Untuk libsass (implementasi C / C ++), impor bekerja *.cssdengan cara yang sama seperti untuk *.scssfile - cukup hapus ekstensi:

@import "path/to/file";

Ini akan mengimpor path/to/file.css.

Lihat jawaban ini untuk perincian lebih lanjut.

Lihat jawaban ini untuk implementasi Ruby (sass gem)

Stephen Fuhry
sumber
23
@kleinfreund tidak benar dengan Sass 3.3.1. The @importpernyataan tidak berubah sama sekali dan muncul dalam file CSS yang dihasilkan, Sass tidak menyertakan file CSS direferensikan seperti @GSto meminta. Sepertinya akan diterapkan di Sass 3.4 atau 4.0
fregante
1
Jika Anda menggunakan Gulp atau Grunt, cukup gunakan alat lain untuk mengimpor file CSS Anda, lebih mudah dan berfungsi sekarang . Saya menggunakan tegukan-impor-css , saya tidak yakin apa yang setara dengan Grunt.
fregante
3
Paling tidak berfungsi dengan baik libsass. Lihat jawaban stackoverflow.com/questions/7111610/… dan PR github.com/sass/libsass/pull/754
ivn
"Impor berfungsi *.cssdengan cara yang sama seperti untuk *.cssfile" adalah sebuah tautologi. Anda bermaksud salah satu dari mereka *.scss, kan?
underscore_d
1
Mulai dalam v3.5.3, libsass memperingatkan bahwa ini adalah perilaku non-standar dan tidak boleh diandalkan. (Alih-alih "Gunakan importir khusus untuk mempertahankan perilaku ini.") Github.com/sass/libsass/releases/tag/3.5.3
iX3
383

Setelah mengalami masalah yang sama, saya menjadi bingung dengan semua jawaban di sini dan komentar-komentar tentang repositori sass di github.

Saya hanya ingin menunjukkan bahwa pada Desember 2014, masalah ini telah diatasi. Sekarang dimungkinkan untuk mengimpor cssfile langsung ke file sass Anda. PR berikut di github memecahkan masalah ini.

Sintaksnya sama seperti sekarang - @import "your/path/to/the/file", tanpa ekstensi setelah nama file. Ini akan mengimpor file Anda secara langsung. Jika Anda menambahkan *.cssdi akhir, itu akan diterjemahkan ke dalam cssaturan @import url(...).

Jika Anda menggunakan beberapa bundler modul "mewah" baru seperti webpack , Anda mungkin perlu menggunakan penggunaan ~di awal jalan. Jadi, jika Anda ingin mengimpor jalur berikut node_modules/bootstrap/src/core.scssAnda akan menulis sesuatu seperti
@import "~bootstrap/src/core".

CATATAN:
Tampaknya ini tidak berfungsi untuk semua orang. Jika penerjemah Anda didasarkan pada libsassitu harus berfungsi dengan baik (periksa ini ). Saya sudah diuji menggunakan @importpada node-sass dan itu berfungsi dengan baik. Sayangnya ini berfungsi dan tidak berfungsi pada beberapa contoh ruby.

tftd
sumber
1
Ini tampaknya diimplementasikan di libsasstetapi ketika menggunakan implementasi ruby ​​dari sass, tampaknya sintaks ini berfungsi, tetapi hanya jika Anda telah sass-css-importerdiminta. Setidaknya itulah yang saya lihat. Adakah yang bisa mengkonfirmasi ini?
bsara
5
Apakah Anda yakin memiliki versi sass terbaru? Saya telah menggunakan sintaks ini untuk sementara waktu dan itu berfungsi baik dengan keduanya rubydan nodejspenerjemah. Sudahkah Anda memeriksa jika Anda tidak menempatkan ekstensi setelah nama file? Sintaks yang benar adalah @import "path/to/style/file(tanpa .cssekstensi)
tftd
4
Saya menggunakan ruby ​​sass v3.4.18 (dengan Jekyll) menurut Gemfile.lock saya. Masih melihat Error: File to import not found or unreadable: cssdep/cssfile. Jika saya membuatnya cssdep/cssfile.scsstiba-tiba berfungsi. Jadi bukan masalah jalur, untuk beberapa alasan saya masih tidak bisa memasukkan file '.css' dari 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)Tidak bekerja di sini
Cyril Chapon
5
Terima kasih untuk ini! Saya dapat mengimpor normalize.css menggunakan node-sass dengan@import "node_modules/normalize.css/normalize";
Nick
260

Anda harus menambahkan awal garis bawah ke file css untuk disertakan, dan mengalihkan ekstensinya ke scss (mis _yourfile.scss. :) . Maka Anda hanya perlu menyebutnya seperti ini:

@import "yourfile";

Dan itu akan mencakup isi file, alih-alih menggunakan direktif standar impor CSS.

David Morales
sumber
1
Mungkin sesuatu tentang konvensi dan standar.
David Morales
70
Garis bawah adalah untuk mencegahnya dikompilasi sebagai file terpisah.
Jonah
4
Jika ada yang bertanya-tanya, ini berhasil karena sintaks SCSS Sass adalah superset dari CSS3. Itu juga mengapa titik koma dibutuhkan.
Jacob Wan
46
Anda tidak dapat mengubah ekstensi beberapa file CSS vendor misalnya.
Slava Fomin II
7
Jika ada di komputer / server Anda, Anda bisa! Dan ada juga tautan simbolis jika Anda tidak mau.
ste
260

Ini diimplementasikan dan digabung mulai dari versi 3.2( tarikan # 754 digabung pada 2 Jan 2015 untuk libsass, masalah aslinya didefinisikan di sini: sass# 193 # 556 , libsass# 318 ).

Untuk mempersingkat cerita, sintaksis berikutnya:

  1. untuk mengimpor (termasuk) file CSS mentah

    sintaksnya tanpa.css ekstensi di akhir (menghasilkan pembacaan aktual sebagian s[ac]ss|cssdan menyertakannya sebaris ke SCSS / SASS):

    @import "path/to/file";

  2. untuk mengimpor file CSS dengan cara tradisional

    sintaks berjalan dengan cara tradisional, dengan .cssekstensi di akhir (hasil @import url("path/to/file.css");dalam CSS yang dikompilasi):

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

Dan itu sangat bagus: sintaks ini elegan dan singkat, ditambah kompatibel dengan belakang! Ia bekerja dengan sangat baik dengan libsassdan node-sass.

__

Untuk menghindari spekulasi lebih lanjut dalam komentar, menulis ini secara eksplisit: Sass berbasis Ruby masih memiliki fitur ini tidak diterapkan setelah 7 tahun diskusi. Pada saat menulis jawaban ini, dijanjikan bahwa pada 4.0 akan ada cara sederhana untuk mencapai ini, mungkin dengan bantuan . Tampaknya akan ada implementasi segera, tag baru "terencana" "Proposal Diterima" ditugaskan untuk masalah # 556 dan fitur baru .@use@use

jawabannya mungkin diperbarui, segera setelah sesuatu berubah .

Sisi jauh
sumber
3
hanya untuk memperjelas, mengimpor css sebagai sass bekerja seperti ini untuk saya: @import url ("path / to / file-without-css-extension");
Craig Wayne
1
Ini sebenarnya tidak berfungsi di versi sass berbasis ruby. Sebagai contoh, perintah: sass myFile.scss: output.css gagal dengan impor css, tetapi berfungsi ketika Anda mengubah ekstensi file .css menjadi .scss. Jalankan dengan versi terbaru pada penulisan komentar ini: 3.4.22 / Selective Steve. Ini juga mempengaruhi pelari tugas yang menggunakan versi ruby, seperti grunt-contrib-sass.
ansorensen
@ansorensen, saya pikir ada kebingungan dari sisi Anda. Apa yang Anda maksud dengan "berfungsi ketika Anda mengubah ekstensi file .css menjadi .scss" ? Seluruh ide sebenarnya tentang file CSS biasa , dan dua cara untuk bekerja dengannya (jangan bingung dengan mengimpor SCSS). Harap baca sekali lagi pertanyaan dan jawabannya.
Farside
@Farside Tidak bingung. Impor sintaks 'jalur / ke / file' tidak berfungsi di versi terbaru permata sass di Ruby. Ketika saya menjalankan sass dengan impor, impor bekerja dengan sukses ketika file di jalur yang diimpor memiliki ekstensi .scss dan gagal ketika file memiliki .css. Pertanyaannya meminta impor css ke scss, dan Anda memberikan jawaban untuk lib-sass & node-sass. Saya berkomentar bahwa fungsi ini tidak ada dalam versi sass berbasis ruby.
ansorensen
1
@ansorensen, omg, begitu banyak teks dari Anda ... Saya eksplisit, dan jangan membingungkan siapa pun. Node-sassadalah perpustakaan Node.js LibSass ( versi C dari Sass). Tidak satu pun menyebutkan itu libsassatau node-sassberbasis Ruby, tidak satu pun menyebutkan tentang versi RUBY hanya dalam pertanyaan asli. Tolong, baca dengan seksama, sebelum menulis 3 komentar berturut-turut lain kali. Saya memiliki semua referensi: sesuai masalah # 193 masih belum diterapkan setelah 5 tahun diskusi untuk versi Ruby, mereka menjanjikan fungsi ini hanya ketika ver. 4.0 akan tersedia.
Farside
37

Berita baik semua orang, Chris Eppstein membuat plugin kompas dengan fungsionalitas inline css import:

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

Sekarang, mengimpor file CSS semudah:

@import "CSS:library/some_css_file"
Rafal Pastuszak
sumber
3
Gagal karena menggunakan titik awal yang sudah usang. "Apa itu, tetapi tidak pernah bisa ..." Saya yakin itu hebat ketika pertama kali keluar, tetapi perlu pembaruan untuk berfungsi lagi, atau Anda harus menginstal plugin yang sudah tidak digunakan lagi. Terima kasih, C§
CSS
18

Jika Anda memiliki .cssfile yang tidak ingin Anda modifikasi, jangan ubah ekstensi ke .scss( mis. File ini berasal dari proyek bercabang yang tidak Anda pertahankan ), Anda selalu dapat membuat symlink dan kemudian mengimpornya ke file Anda .scss.

Membuat symlink:

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


Impor file symlink ke target .scss:

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


.cssFile output target Anda akan menyimpan konten dari .scssfile symlink yang diimpor , bukan aturan impor CSS ( disebutkan oleh @yaz dengan suara komentar tertinggi ). Dan Anda tidak memiliki file duplikat dengan ekstensi berbeda, apa artinya setiap pembaruan yang dibuat di dalam .cssfile awal segera diimpor ke output target Anda.

Symbolic link (juga symlink atau soft link) adalah jenis file khusus yang berisi referensi ke file lain dalam bentuk path absolut atau relatif dan yang mempengaruhi resolusi pathname.
- http://en.wikipedia.org/wiki/Symbolic_link

Nik Sumeiko
sumber
9
Menambahkan symlink bukanlah solusi yang sangat portabel (yaitu beberapa pengembang atau membangun sistem)
LocalPCGuy
@LocalPCGeli, ketika kedua file ( .cssdan symlink yang dibuat) tersedia untuk semua orang melalui repositori bersama, misalnya.
Nik Sumeiko
Saya baru saja melakukan ini dan akan menjawab tentang tautan sym pada utas ini, tetapi senang sudah ada di sini! Memang benar bahwa kebutuhan ini jarang, tetapi situasi saya melibatkan tidak ingin memodifikasi file CSS sama sekali (karena itu adalah file yang lebih tebal), jadi membangun symlink dan mengimpor yang bekerja dengan sempurna.
Aaron Krauss
2
Untuk pengguna Windows , fungsionalitas yang sama akan memiliki sintaks yang berbeda mklink /H <link> <target>, dan itu disebut hard link @ mrsafraz.
Farside
5

Anda dapat menggunakan pihak ketiga importeruntuk menyesuaikan @importsemantik.

node-sass-import-once , yang bekerja dengan node-sass (untuk Node.js) dapat secara inline mengimpor file CSS.

Contoh penggunaan langsung:

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

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

Contoh konfigurasi 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"
      }
    }
  });

Perhatikan bahwa node-sass-import-once saat ini tidak dapat mengimpor parsial Sass tanpa garis bawah utama yang eksplisit. Misalnya dengan file partials/_partial.scss:

  • @import partials/_partial.scss berhasil
  • @import * partials/partial.scss gagal

Secara umum, ketahuilah bahwa importir khusus dapat mengubah semantik impor apa pun . Baca dokumen sebelum Anda mulai menggunakannya.

joews
sumber
4

Jika saya benar css kompatibel dengan scss sehingga Anda dapat mengubah ekstensi css ke scss dan itu harus terus bekerja. Setelah Anda mengubah ekstensi, Anda dapat mengimpornya dan itu akan disertakan dalam file.

Jika Anda tidak melakukannya sass akan menggunakan css @import yang merupakan sesuatu yang tidak Anda inginkan.

Acar
sumber
16
sayangnya terkadang file css yang diimpor berada di luar kendali Anda, seperti di perpustakaan yang mengemas beberapa aset statis.
Eric Drechsel
2

Saya menemukan cara Rails yang elegan untuk melakukannya. Pertama, ganti nama .scssfile Anda .scss.erb, kemudian gunakan sintaks seperti ini (contoh untuk highlight_js-rails4 gem CSS aset ):

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

Mengapa Anda tidak dapat meng-host file secara langsung melalui SCSS :

Melakukan @importdalam SCSS berfungsi dengan baik untuk file CSS selama Anda secara eksplisit menggunakan path lengkap dengan satu atau lain cara. Dalam mode pengembangan, rails smelayani aset tanpa mengompilasinya, jadi jalur seperti ini berfungsi ...

@import "highlight_js/github.css";

... karena jalur yang di-host secara harfiah /assets/highlight_js/github.css. Jika Anda mengklik kanan pada halaman dan "melihat sumber", lalu klik pada tautan untuk stylesheet dengan yang di atas @import, Anda akan melihat garis di sana yang terlihat seperti:

@import url(highlight_js/github.css);

Mesin SCSS diterjemahkan "highlight_js/github.css"menjadi url(highlight_js/github.css). Ini akan bekerja dengan baik sampai Anda memutuskan untuk mencoba menjalankannya di produksi di mana aset dikompilasi memiliki hash yang disuntikkan ke nama file. File SCSS masih akan menyelesaikan ke statis /assets/highlight_js/github.cssyang tidak dikompilasi dan tidak ada dalam produksi.

Bagaimana solusi ini bekerja:

Pertama, dengan memindahkan .scssfile ke .scss.erb, kami telah secara efektif mengubah SCSS menjadi templat untuk Rails. Sekarang, setiap kali kita menggunakan <%= ... %>tag templat, prosesor templat Rails akan mengganti snippet ini dengan output kode (sama seperti templat lainnya).

Menyatakan asset_path("highlight_js/github")dalam .scss.erbfile melakukan dua hal:

  1. Memicu rake assets:precompiletugas untuk mengkompilasi file CSS yang sesuai.
  2. Menghasilkan URL yang mencerminkan aset dengan tepat terlepas dari lingkungan Rails.

Ini juga berarti bahwa mesin SCSS bahkan tidak mem-parsing file CSS; itu hanya menampung tautan! Jadi tidak ada patch monyet tipu atau solusi kotor. Kami melayani aset CSS melalui SCSS sebagaimana dimaksud, dan menggunakan URL untuk mengatakan aset CSS sebagai Rails dimaksudkan. Manis!

Sintead
sumber
Bagi saya solusinya tampak agak teduh dan terdengar lebih seperti retasan. Tapi itu pekerjaan yang bagus dalam penyelidikan!
Farside
0

Solusi sederhana:

Semua, atau hampir semua file css dapat juga diartikan seolah-olah itu adalah scss. Ini juga memungkinkan untuk mengimpornya di dalam blok. Ubah nama css menjadi scss, dan impor itu.

Dalam konfigurasi aktual saya, saya melakukan hal berikut:

Pertama-tama saya menyalin file .css menjadi file sementara, kali ini dengan ekstensi .scss. Contoh konfigurasi kasar:

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

Kemudian Anda dapat mengimpor file .scss dari scss induk Anda (dalam contoh saya, bahkan diimpor ke dalam blok):

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

Catatan: ini bisa berbahaya, karena secara efektif akan menghasilkan bahwa css akan diuraikan beberapa kali. Periksa css asli Anda karena mengandung artefak scss-interpretable (tidak mungkin, tetapi jika itu terjadi, hasilnya akan sulit untuk di-debug dan berbahaya).

peterh - Pasang kembali Monica
sumber
-3

Sekarang dimungkinkan menggunakan:

@import 'CSS:directory/filename.css';
Shlomi Schwartz
sumber
3
hanya jika permata sass-css-importerdiinstal, sass disebut dengan sakelar -r sass-css-importerdan .cssdihilangkan dari jalur berkas
Bernhard Döbler
-4

Saya dapat mengkonfirmasi ini berfungsi:

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

Kredit untuk Chriss Epstein: https://github.com/sass/sass/issues/193

Macario
sumber
1
Bagaimana Anda bisa menggunakan ini dalam file scss Anda?
Adrian Ber
-10

Sederhana.

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

Adam Stacoviak
sumber
6
Saya sudah mencoba ini, tetapi itu tidak akan menarik isi file ke dalam yang satu saat mengompres, itu hanya akan menjaga baris impor.
GSto
1
Jawaban skor terendah, tetapi ironisnya, ini tampaknya menjadi cara yang benar, sekarang. Termasuk sufiks adalah hal yang benar untuk dilakukan.
Wyck