Di bawah app/assets/stylesheets saya, saya membuat folder components karena saya suka membuat gaya khusus untuk masing-masing komponen html saya. Dengan cara ini di file sass saya yang sebenarnya (some_page.scss) saya hanya dapat melakukan beberapa impor tergantung pada apa yang saya butuhkan.

Untuk visual, inilah tampilan struktur folder sekarang:

- app
  - assets
    - stylesheets
      - components
        _component1.scss
        _component2.scss
      application.css
      page-specific.scss

Sekarang di bawah components saya punya

_colors.scss // declaring colors for my app
_other_stuff.scss // other stuff...

Biasanya ketika melakukan impor, saya mengimpor warna terlebih dahulu agar saya dapat menggunakannya di komponen saya yang lain. Tapi Rails mengeluh:

Menampilkan /Users/abdulahmad/Desktop/rails/password-service/app/views/layouts/application.html.erb di mana baris #5 muncul:

Variabel tidak terdefinisi: "$hijau".

Apakah saya harus melakukan sesuatu yang istimewa untuk memberi tahu Rails bahwa saya ingin sass saya dikompilasi di folder komponen? atau apakah kesalahan ini terjadi karena alasan lain?

Omong-omong, berikut adalah konten file scss khusus halaman saya:

@import 'components/colors';
@import 'components/inputs';
2
duxfox-- 10 Juni 2016, 21:54

1 menjawab

Jawaban Terbaik

Ganti nama application.css Anda menjadi application.css.scss

Dan kemudian file application.css.scss harus seperti di bawah ini.

@import "components/*";
@import "page-specific";
1
emrahbasman 10 Juni 2016, 22:10
Terima kasih saya akan mencoba ini dan melihat. Tapi sekarang saya harus menyertakan semua lembar gaya khusus halaman setiap kali saya menambahkan yang baru?
 – 
duxfox--
10 Juni 2016, 22:11
Letakkan di folder seperti /application. @import "aplikasi/*"; sneaky_smile.gif
 – 
emrahbasman
10 Juni 2016, 22:15
Bukankah rails hanya menyertakan gaya halaman khusus untuk setiap halaman? jadi jika saya memiliki login_controller, dan login.scss, hanya login.scss yang akan dimuat untuk login/index. Jika saya mengimpor semua file di folder aplikasi yang Anda sebutkan, semua gaya akan dimuat untuk setiap halaman
 – 
duxfox--
10 Juni 2016, 22:18
Pipa aset akan menggabungkan semua file css Anda. Anda hanya akan memiliki 1 permintaan untuk application.css. Ini akan dimuat 1 kali. Permintaan lain akan dibaca dari cache.
 – 
emrahbasman
10 Juni 2016, 22:20
Jika file css spesifik Anda memiliki elemen yang sama, Anda harus memberikan id ke tubuh Anda dan file css Anda harus seperti #Home > div { color: #000; } #Tentang > div { warna: #fff; }
 – 
emrahbasman
10 Juni 2016, 22:23