postcss import
14.0.0
Plugin PostCSS untuk mengubah aturan
@importdengan memasukkan konten.
Plugin ini dapat menggunakan file lokal, modul node, atau web_modules. Untuk menyelesaikan jalur aturan @import , ia dapat melihat ke direktori root (secara default process.cwd() ), web_modules , node_modules atau modul lokal. Saat mengimpor modul, modul akan mencari index.css atau file yang direferensikan di package.json di bidang style atau main . Anda juga dapat memberikan beberapa jalur secara manual untuk dilihat.
Catatan:
Plugin ini mungkin harus digunakan sebagai plugin pertama dalam daftar Anda. Dengan cara ini, plugin lain akan bekerja pada AST seolah-olah hanya ada satu file untuk diproses, dan mungkin akan berfungsi seperti yang Anda harapkan .
Menjalankan postcss-url setelah postcss-import di rantai plugin Anda akan memungkinkan Anda menyesuaikan aset url() (atau bahkan menyejajarkannya) setelah menyejajarkan file yang diimpor.
Untuk mengoptimalkan keluaran, plugin ini hanya akan mengimpor file satu kali pada cakupan tertentu (root, media query...). Pengujian dilakukan dari jalur & konten file yang diimpor (menggunakan tabel hash). Jika perilaku ini bukan yang Anda inginkan, lihat opsi skipDuplicates
Jika Anda mencari Impor Glob , Anda dapat menggunakan postcss-import-ext-glob untuk memperluas postcss-import.
Jika Anda ingin mengimpor sumber jarak jauh, Anda dapat menggunakan postcss-import-url dengan opsi plugin dataUrls untuk memperluas postcss-import.
Impor yang tidak diubah (oleh options.filter atau karena impor jarak jauh) dipindahkan ke bagian atas output.
Plugin ini mencoba mengikuti spesifikasi CSS @import ; Pernyataan @import harus mendahului semua pernyataan lainnya (selain @charset ).
$ npm install -D postcss-impor
Kecuali jika stylesheet Anda berada di tempat yang sama dengan tempat Anda menjalankan postcss ( process.cwd() ), Anda perlu menggunakan opsi from agar impor relatif berfungsi.
// dependenciesconst fs = memerlukan("fs")const postcss = memerlukan("postcss")const atImport = memerlukan("postcss-import")// css untuk diprosesconst css = fs.readFileSync("css/input.css" , "utf8")// proses csspostcss()
.use(atImport())
.process(css, {// opsi `from` diperlukan dari sini: "css/input.css"
})
.then((hasil) => {const keluaran = hasil.cssconsole.log(keluaran)
}) css/input.css :
/* url jarak jauh dipertahankan */@import "https://example.com/styles.css";/* dapat menggunakan `node_modules`, `web_modules` atau modul lokal */@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@import "normalisasi.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* relatif terhadap css/ menurut opsi `dari` di atas *//* semua notasi standar nilai "url" didukung */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (lebar minimum: 25em);@import 'baz.css' layer(baz-layer);body { latar belakang: hitam;
}akan memberi Anda:
@import "https://example.com/styles.css";/* ... konten ../node_modules/cssrecipes-defaults/index.css *//* ... konten ../node_modules/normalize .css/normalize.css *//* ... isi css/foo.css *//* ... isi dari css/foo-1.css *//* ... konten css/foo-2.css */@media (min-width: 25em) {/* ... konten css/bar.css */} @layer baz-layer {/* ... konten css/baz.css */}body { latar belakang: hitam;
}Lihat tes untuk contoh lainnya.
filter Jenis: Function
Bawaan: () => true
Hanya ubah impor yang fungsi pengujiannya mengembalikan true . Impor yang fungsi pengujiannya mengembalikan false akan dibiarkan apa adanya. Fungsi mendapatkan jalur untuk diimpor sebagai argumen dan harus mengembalikan boolean.
root Jenis: String
Default: process.cwd() atau dirname dari postcss from
Tentukan root tempat untuk menyelesaikan jalur (misalnya: tempat di mana node_modules berada). Sebaiknya tidak digunakan terlalu banyak.
Catatan: @import yang disarangkan juga akan mendapatkan keuntungan dari dirname relatif dari file yang diimpor.
path Tipe: String|Array
Bawaan: []
String atau larik jalur tempat mencari file.
plugins Jenis: Array
Bawaan: undefined
Serangkaian plugin untuk diterapkan pada setiap file yang diimpor.
resolve Jenis: Function
Bawaan: null
Anda dapat memberikan penyelesai jalur khusus dengan opsi ini. Fungsi ini mendapatkan argumen (id, basedir, importOptions, astNode) dan harus mengembalikan jalur, larik jalur, atau janji yang menyelesaikan jalur tersebut. Jika Anda tidak mengembalikan jalur absolut, jalur Anda akan diselesaikan ke jalur absolut menggunakan penyelesai default. Anda dapat menggunakan tekad untuk ini.
load Jenis: Function
Bawaan: nol
Anda dapat menimpa cara pemuatan default dengan mengatur opsi ini. Fungsi ini mendapatkan argumen (filename, importOptions) dan mengembalikan konten atau konten yang dijanjikan.
skipDuplicates Jenis: Boolean
Bawaan: true
Secara default, file serupa (berdasarkan konten yang sama) dilewati. Ini untuk mengoptimalkan output dan melewatkan file serupa seperti normalize.css misalnya. Jika perilaku ini bukan yang Anda inginkan, setel saja opsi ini ke false untuk menonaktifkannya.
addModulesDirectories Jenis: Array
Bawaan: []
Serangkaian nama folder untuk ditambahkan ke penyelesai Node. Nilai akan ditambahkan ke direktori penyelesaian default: ["node_modules", "web_modules"] .
Opsi ini hanya untuk menambahkan direktori tambahan ke penyelesai default. Jika Anda memberikan penyelesai Anda sendiri melalui opsi konfigurasi resolve di atas, maka nilai ini akan diabaikan.
warnOnEmpty Jenis: Boolean
Bawaan: true
Secara default, postcss-import memperingatkan ketika file kosong diimpor.
Setel opsi ini ke false untuk menonaktifkan peringatan ini.
const postcss = memerlukan("postcss")const atImport = memerlukan("postcss-import")postcss()
.use(atImport({jalur: ["src/css"],
}))
.proses(cssString)
.then((hasil) => {const { css } = hasil
})dependency postcss-import menambahkan pesan ke result.messages untuk setiap @import . Pesan dalam format berikut:
{
type: 'dependency',
file: absoluteFilePath,
parent: fileContainingTheImport
}Ini terutama untuk digunakan oleh pelari postcss yang mengimplementasikan pengamatan file.
⇄ Permintaan tarik dan ★ Bintang selalu diterima.
Untuk bug dan permintaan fitur, silakan buat masalah.
Permintaan penarikan harus disertai dengan kelulusan pengujian otomatis ( $ npm test ).
