SCSS dosyasında normal CSS dosyası içe aktarılsın mı?

Sass'ın @importkomutuyla normal bir CSS dosyasını içe aktarmak için yine de var mı ? Sass'ın tüm SCSS sözdizimini kullanmama rağmen, yine de özellikleri birleştiren / sıkıştıran zevk alıyorum ve tüm dosyalarımı * .scss olarak yeniden adlandırmadan kullanabilmek istiyorum

Bu yazının yazıldığı tarih itibariyle bunun uygulanmadığı anlaşılıyor:

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

Libsass (C / C ++ uygulaması) için içe aktarma *.css, *.scssdosyalar için olduğu gibi çalışır - uzantıyı atlamanız yeterlidir :

@import "path/to/file";

Bu içe aktarılacak path/to/file.css.

Daha fazla ayrıntı için bu cevaba bakınız.

Ruby uygulaması için bu cevaba bakınız (sass gem)

Aynı sorunu yaşadıktan sonra, buradaki tüm cevaplar ve github'daki sass deposu hakkındaki yorumlarla kafam karıştı.

Sadece Aralık 2014 itibariyle bu sorunun çözüldüğünü belirtmek istiyorum. Artık cssdosyaları doğrudan sass dosyanıza içe aktarmak mümkündür . Aşağıdaki github'daki PR sorunu çözmektedir.

Sözdizimi şu ankiyle aynı - @import "your/path/to/the/file"dosya adından sonra bir uzantı olmadan. Bu, dosyanızı doğrudan içe aktarır. *.cssSonuna eklerseniz , csskural haline dönüşür @import url(...).

Webpack gibi bazı "süslü" yeni modül paketleyicilerini kullanıyorsanız , muhtemelen ~yolun başında kullanımı kullanmanız gerekecektir . Yani, aşağıdaki yolu almak node_modules/bootstrap/src/core.scssistiyorsanız, şöyle bir şey yazacaksınız
@import "~bootstrap/src/core".

NOT:
Görünüşe göre bu herkes için işe yaramıyor. Senin tercüman dayalı ise libsassonun gerektiğini cezası (Kasaya çalışıyor bu ). @importDüğüm-sass kullanarak test ettim ve iyi çalışıyor. Ne yazık ki bu işe yarar ve bazı yakut örneklerde çalışmaz.

Eklenecek css dosyasına bir alt çizgi eklemeli ve uzantısını scss (ex:) olarak değiştirmelisiniz _yourfile.scss. O zaman sadece bu şekilde çağırmalısınız:

@import "yourfile";

CSS standardı @import yönergesini kullanmak yerine dosyanın içeriğini de içerecektir.

Bu hayata geçirildi ve sürümden başlayarak birleşti 3.2( pull # 754 üzerinde birleşti 2 Ocak 2015 için libsass:, sorunlar originaly burada tanımlandı sass# 193 # 556 , libsass# 318 ).

Uzun hikayeyi kısaltmak için, sonraki sözdizimi:

1. ham CSS dosyasını içe aktarmak (dahil etmek)

   sözdizimi olmadan.css (kısmi gerçek okuma sonuçları sonunda uzatma s[ac]ss|cssve SCSS / SAS'lara içi bunu içerir):

   @import "path/to/file";

2. CSS dosyasını geleneksel bir şekilde içe aktarmak için

   sözdizimi sonunda uzantı ile.css geleneksel yoldan gider ( @import url("path/to/file.css");derlenmiş CSS sonuçlanır ):

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

Ve çok iyi: bu sözdizimi zarif ve laconic, artı geriye dönük uyumlu! O ile mükemmel bir performans sergiliyor libsassve node-sass.

__

Bu açıkça yazılı, yorum daha spekülasyonları önlemek için: Yakut merkezli Sass hala bu özellik vardır uygulanmayan tartışmaların 7 yıl sonra. Bu cevabı yazarken, 4.0'da bunu başarmanın basit bir yolu olacağına söz veriyoruz, muhtemelen yardımıyla @use. Çok yakında bir uygulama olacak gibi görünüyor, yeni "planlanan" "Teklif Kabul Edildi" etiketi 556 numaralı sorun ve yeni @useözellik için atandı .

bir şey değişir değişmez cevap güncellenebilir .

Herkese iyi haberler, Chris Eppstein satır içi css içe aktarma işlevine sahip bir pusula eklentisi oluşturdu:

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

Şimdi, bir CSS dosyasını içe aktarmak şu kadar kolay:

@import "CSS:library/some_css_file"

.cssDeğiştirmek istemediğiniz bir dosyanız varsa, uzantısını da değiştirmeyin .scss( örneğin, bu dosya sürdürmediğiniz çatallı bir projeden ), her zaman bir symlink oluşturabilir ve daha sonra onu bilgisayarınıza aktarabilirsiniz .scss.

Bir sembolik bağlantı oluşturur:

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

Symlink dosyasını bir hedefe aktarır .scss:

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

Hedef çıktı .cssdosyanız .scssbir CSS içe aktarma kuralı değil ( @yaz tarafından en yüksek yorum oyu ile belirtilir) içe aktarılan symlink dosyasındaki içerikleri tutacaktır . Ve farklı uzantılara sahip çoğaltılmış dosyalarınız yok, yani ilk .cssdosyada yapılan herhangi bir güncelleme hemen hedef çıktınıza aktarılır.

Sembolik bağlantı (ayrıca sembolik bağlantı veya yumuşak bağlantı), mutlak veya göreli yol biçiminde başka bir dosyaya başvuru içeren ve yol adı çözümlemesini etkileyen özel bir dosya türüdür.
- http://en.wikipedia.org/wiki/Symbolic_link

Anlambilimi importerözelleştirmek için bir üçüncü taraf kullanabilirsiniz @import.

Düğüm-küstahlık-ithalat-once ile çalışır, düğüm-sass (node.js için) ithalat CSS dosyaları satır içine alabilirsiniz.

Doğrudan kullanım örneği:

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

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

Örnek grunt-sass yapılandırması:

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

Node-sass-import-once öğesinin şu anda açık bir altçizgi olmadan Sass parçalarını içe aktaramayacağını unutmayın. Örneğin dosya ile partials/_partial.scss:

• @import partials/_partial.scss başarılı
• @import * partials/partial.scss başarısız

Genelde, özel bir ithalatçı değişebilir unutmayın herhangi ithalat anlambilim. Kullanmaya başlamadan önce dokümanları okuyun.

Eğer doğru iseniz css scss ile uyumludur, böylece scss için bir css uzantısını değiştirebilirsiniz ve çalışmaya devam etmelidir. Uzantıyı değiştirdikten sonra içe aktarabilirsiniz ve dosyaya dahil edilir.

Bunu yapmazsanız, sass, istemediğiniz bir şey olan css @import'u kullanacaktır.

Bunu yapmak için zarif, Rails benzeri bir yol buldum. Öncelikle .scssdosyanızı şu şekilde yeniden adlandırın .scss.erb, ardından böyle bir sözdizimi kullanın ( vurgulama_js-rails4 gem CSS öğesi için örnek ):

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

Dosyayı neden doğrudan SCSS aracılığıyla barındıramıyorsunuz :

@importSCSS'de yapmak , tam yolu bir şekilde veya başka şekilde kullandığınız sürece CSS dosyaları için iyi çalışır. Geliştirme modunda, rails svarlıkları derlemeden sunar, böylece böyle bir yol çalışır ...

@import "highlight_js/github.css";

... çünkü barındırılan yol tam anlamıyla /assets/highlight_js/github.css. Sayfayı sağ tıklatıp "kaynağı görüntüle" yi tıklarsanız, ardından yukarıdaki sayfayla stil sayfasının bağlantısını tıklarsanız, @importiçinde şöyle görünen bir satır görürsünüz:

@import url(highlight_js/github.css);

SCSS motoru çevirir "highlight_js/github.css"için url(highlight_js/github.css). Bu, varlıkların önceden derlendiği üretimde çalıştırmaya karar verene kadar yüzme adıyla çalışacak ve dosya adına bir karma eklenecektir. SCSS dosyası hala /assets/highlight_js/github.cssönceden derlenmemiş ve üretimde olmayan bir statik çözülecektir .

Bu çözüm nasıl çalışır:

Birincisi, .scssdosyayı taşıyarak .scss.erbSCSS'yi Rails için bir şablona dönüştürdük. Artık, <%= ... %>şablon etiketlerini her kullandığımızda , Rails şablon işlemcisi bu parçacıkları kodun çıkışıyla değiştirecektir (diğer şablonlarda olduğu gibi).

Belirten asset_path("highlight_js/github")içinde .scss.erbdosyanın iki şey yapar:

1. rake assets:precompileUygun CSS dosyasını önceden derlemek için görevi tetikler .
2. Rails ortamından bağımsız olarak varlığı uygun şekilde yansıtan bir URL oluşturur.

Bu ayrıca SCSS motorunun CSS dosyasını ayrıştırmadığı anlamına gelir; sadece bir bağlantıyı barındırıyor! Yani hokey maymun yamaları ya da iğrenç çözümler yok. Bir CSS varlığını amaçlandığı şekilde SCSS üzerinden sunuyoruz ve adı geçen CSS varlığına Rails amaçlanan bir URL kullanıyoruz. Tatlı!

Basit geçici çözüm:

Tüm veya neredeyse tüm css dosyası scss gibi yorumlanabilir. Ayrıca bir bloğun içine aktarılmasını sağlar. Css dosyasını scss olarak yeniden adlandırın ve alın.

Gerçek yapılandırmamda aşağıdakileri yapıyorum:

Öncelikle .css dosyasını bu sefer .scss uzantılı geçici bir dosyaya kopyalarım. Grunt örnek yapılandırma:

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

Sonra .scss dosyasını üst scss'nizden içe aktarabilirsiniz (örneğimde, bir bloğa bile aktarılır):

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

Not: bu tehlikeli olabilir, çünkü css'nin birkaç kez ayrıştırılması etkili bir şekilde sonuçlanacaktır. Orijinal css'nizde scss tarafından yorumlanabilen herhangi bir eser olup olmadığını kontrol edin (bu mümkün değildir, ancak gerçekleşirse, sonuç hata ayıklamak zor ve tehlikeli olacaktır).

Artık aşağıdakileri kullanarak mümkündür:

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

Bu çalışmayı onaylayabilirim:

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

Chriss Epstein'a teşekkür ederiz: https://github.com/sass/sass/issues/193

Basit.

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