Impor file CSS biasa dalam file SCSS?

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

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)

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.

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.

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 .

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"

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

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.

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.

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!

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

Sekarang dimungkinkan menggunakan:

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

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

Sederhana.

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