Di SASS, apakah mungkin untuk mengimpor file dari direktori lain? Misalnya, jika saya memiliki struktur seperti ini:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scss dapat mengimpor _common.scss menggunakan @import "common"tetapi mungkinkah more_styles.scss mengimpor _common.scss? Saya mencoba beberapa hal berbeda termasuk @import "../sub_directory_a/common"dan @import "../sub_directory_a/_common.scss"tetapi tidak ada yang berhasil.

Sepertinya beberapa perubahan pada SASS memungkinkan apa yang Anda coba lakukan pada awalnya:

@import "../subdir/common";

Kami bahkan membuat ini berfungsi untuk beberapa folder yang sama sekali tidak terkait yang terletak di c:\projects\sass:

@import "../../../../../../../../../../projects/sass/common";

Cukup tambahkan secukupnya ../untuk memastikan Anda akan berakhir di root drive dan Anda siap melakukannya.

Tentu saja, solusi ini jauh dari cukup, tetapi saya tidak bisa mengimpor dari folder yang sama sekali berbeda untuk bekerja, tidak menggunakan I c:\projects\sassatau mengatur variabel lingkungan SASS_PATH(dari :: referensi load_paths ) ke nilai yang sama.

Anda dapat menggunakan tombol -Ibaris perintah atau :load_pathsopsi dari kode Ruby untuk ditambahkan sub_directory_ake jalur pemuatan Sass. Jadi jika Anda menjalankan Sass root_directory, lakukan sesuatu seperti ini:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Maka Anda hanya dapat menggunakan @import "common"di more_styles.scss.

Menggunakan webpack dengan sass-loader yang bisa saya gunakan ~untuk merujuk ke jalur root proyek. Misalnya dengan asumsi struktur folder OPs dan Anda berada dalam file di dalam sub_directory_b:

@import "~sub_directory_a/_common";

Dokumentasi: https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

Mengimpor .scssfile yang memiliki impor bersarang dengan posisi relatif berbeda tidak akan berfungsi. jawaban atas yang diusulkan (menggunakan banyak ../) hanyalah peretasan kotor yang akan berfungsi selama Anda menambahkan cukup ../untuk mencapai root OS penerapan proyek Anda.

1. Tambahkan jalur SCSS target sebagai target penelusuran untuk compiler SCSS. Ini dapat dicapai dengan menambahkan folder stylesheets ke dalam file konfigurasi scss, ini adalah fungsi kerangka kerja yang Anda gunakan,

menggunakan :load_pathspada config.rduntuk kerangka kerja berbasis kompas (Ex. rel)

gunakan kode berikut di scss-config.jsonuntukfourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}

2. Gunakan jalur absolut (vs. jalur relatif).

Contoh, dengan fourseven/meteor-scss, Anda dapat menggunakan {}untuk menyorot tingkat teratas dari proyek Anda sesuai contoh berikut

@import "{}/node_modules/module-name/stylesheet";

Jawaban yang dipilih tidak menawarkan solusi yang layak.

Praktik OP sepertinya tidak teratur. File bersama / umum biasanya berada di bawah partials, direktori boilerplate standar. Anda kemudian harus menambahkan partialsdirektori ke jalur impor konfigurasi Anda untuk menyelesaikan sebagian di mana pun dalam kode Anda.

Ketika saya mengalami masalah ini untuk pertama kalinya, saya pikir SASS mungkin memberi Anda variabel global yang mirip dengan Node __dirname, yang membuat jalur absolut ke direktori kerja saat ini ( cwd). Sayangnya, tidak dan alasannya adalah karena interpolasi pada @importdirektif tidak memungkinkan, maka Anda tidak dapat melakukan jalur impor dinamis.

Menurut dokumen SASS .

Anda perlu mengatur :load_pathskonfigurasi Sass Anda. Karena OP menggunakan Kompas, saya akan mengikuti sesuai dengan dokumentasi di sini .

Anda dapat menggunakan solusi CLI sesuai tujuan, tetapi mengapa? jauh lebih nyaman untuk menambahkannya config.rb. Masuk akal untuk menggunakan CLI untuk menimpa config.rb(Misalnya, skenario build berbeda).

Jadi, dengan asumsi Anda config.rbberada di bawah root proyek, cukup tambahkan baris berikut: add_import_path 'sub_directory_a'

Dan sekarang @import 'common';akan bekerja dengan baik di mana saja.

Sementara ini menjawab OP, masih ada lagi.

Lampiran

Anda cenderung mengalami kasus di mana Anda ingin mengimpor file CSS dengan cara yang disematkan, yaitu, bukan melalui @importarahan vanilla yang disediakan CSS di luar kotak, tetapi penggabungan sebenarnya dari konten file CSS dengan SASS Anda. Ada pertanyaan lain , yang dijawab dengan tidak meyakinkan (solusinya tidak bekerja lintas lingkungan). Solusinya adalah dengan menggunakan ekstensi SASS ini .

Setelah terinstal, tambahkan baris berikut ke konfigurasi Anda: require 'sass-css-importer'dan kemudian, di suatu tempat di kode Anda:@import 'CSS:myCssFile';

Perhatikan ekstensi harus dihilangkan agar ini berfungsi.

Namun, kami akan mengalami masalah yang sama saat mencoba mengimpor file CSS dari jalur non-default dan add_import_pathtidak mematuhi file CSS. Jadi untuk mengatasinya, Anda perlu menambahkan, baris lain di konfigurasi Anda, yang secara alami serupa:

add_import_path Sass::CssImporter::Importer.new('sub_directory_a')

Sekarang semuanya akan bekerja dengan baik.

PS, saya perhatikan sass-css-importerdokumentasi menunjukkan CSS:awalan diperlukan selain menghilangkan .cssekstensi. Saya menemukan itu berhasil. Seseorang memulai masalah , yang sejauh ini masih belum terjawab.

Gulp akan melakukan pekerjaan untuk mengawasi file sass Anda dan juga menambahkan jalur file lain dengan includePaths. contoh:

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest('css'));
});

node-sass(pembungkus SASS resmi untuk node.js) menyediakan opsi baris perintah --include-pathuntuk membantu dengan persyaratan tersebut.

Contoh:

Masuk package.json:

"scripts": {
    "build-css": "node-sass src/ -o src/ --include-path src/",
}

Sekarang, jika Anda memiliki file src/styles/common.scssdi proyek Anda, Anda dapat mengimpornya @import 'styles/common';di mana saja di proyek Anda.

Lihat https://github.com/sass/node-sass#usage-1 untuk lebih jelasnya.

Untuk menentukan file yang akan diimpor, dimungkinkan untuk menggunakan semua folder definisi umum. Anda hanya perlu menyadari bahwa ini relatif terhadap file yang Anda definisikan. Lebih lanjut tentang opsi impor dengan contoh yang dapat Anda periksa di sini .

Jika menggunakan Web Compiler di Visual Studio Anda dapat menambahkan path ke includePathcompilerconfig.json.defaults. Maka tidak perlu beberapa nomor ../karena kompilator akan menggunakan includePath sebagai lokasi untuk mencari impor.

Sebagai contoh:

"includePath": "node_modules/foundation-sites/scss",

Ini adalah jawaban setengah.

Lihat Kompas , dengan itu Anda dapat menempatkan Anda _common.scssdi dalam partialsfolder, dan kemudian mengimpornya dengan @import common, tetapi berfungsi di setiap file.

Saya mengalami masalah yang sama. Dari solusi saya, saya datang ke ini. Jadi inilah kode Anda:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

Sejauh yang saya tahu jika Anda ingin mengimpor satu scss ke yang lain itu harus parsial. Saat Anda mengimpor dari direktori yang berbeda, beri nama more_styles.scsske _more_styles.scss. Kemudian impor ke template.scss@import seperti ini ../sub_directory_b/_more_styles.scss. Itu berhasil untuk saya. Tapi seperti yang Anda sebutkan ../sub_directory_a/_common.scsstidak berfungsi. Itu direktori yang sama dari template.scss. Itulah mengapa itu tidak akan berhasil.

Pertimbangkan untuk menggunakan parameter includePaths ...

"Kompiler SASS menggunakan setiap jalur di loadPaths saat menyelesaikan SASS @imports."

https://stackoverflow.com/a/33588202/384884

Cara terbaik adalah dengan menggunakan sass-loader. Ini tersedia sebagai paket npm. Ini menyelesaikan semua masalah terkait jalur dan membuatnya sangat mudah.

Saya memiliki masalah yang sama dan saya menemukan solusi dengan menambahkan jalur ke file seperti:

@import "C: / xampp / htdocs / Scss_addons / Bootstrap / bootstrap";

@import "C: / xampp / htdocs / Scss_addons / Kompas / kompas";