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';
1 menjawab
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";