SASS'de başka bir dizinden bir dosya içe aktarmak mümkün mü? Örneğin, böyle bir yapıya sahip olsaydım:

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

template.scss, _common.scss dosyasını kullanarak içe aktarabilir, @import "common"ancak more_styles.scss'in _common.scss'i içe aktarması mümkün müdür? Birkaç farklı şeyler de dahil olmak üzere çalıştı @import "../sub_directory_a/common"ve @import "../sub_directory_a/_common.scss"ancak hiçbir şey işe görünüyor.

Görünüşe göre SASS'de yapılan bazı değişiklikler, başlangıçta yapmayı denediğiniz şeyi mümkün kılmıştır:

@import "../subdir/common";

Bunu, şurada bulunan tamamen alakasız bir klasör için bile çalıştırdık c:\projects\sass:

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

Sadece ../sürücünün kök dizininde olacağınızdan ve gitmenizin iyi olduğundan emin olmak için yeterince ekleyin .

Elbette, bu çözüm güzel olmaktan uzaktır, ancak I c:\projects\sassortam değişkenini SASS_PATH(from :: load_paths referansı ) aynı değere ayarlayarak veya kullanmadan tamamen farklı bir klasörden çalışmak için bir içe aktarma alamadım .

Sass'ın yükleme yoluna eklemek için -Ikomut satırı anahtarını veya :load_pathsRuby kodundaki seçeneği kullanabilirsiniz sub_directory_a. Öyleyse root_directory, Sass'ı buradan çalıştırıyorsanız , şöyle bir şey yapın:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Sonra basitçe kullanabilirsiniz @import "common"içinde more_styles.scss.

Webpack'i sass-loader ile kullanmak ~proje kök yoluna başvurmak için kullanabilirim . Örneğin, OPs klasör yapısını ve sub_directory_b içindeki bir dosyada olduğunuzu varsayarsak:

@import "~sub_directory_a/_common";

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

.scssFarklı bir göreceli konuma sahip iç içe içe aktarmaya sahip bir dosyayı içe aktarmak işe yaramaz. En çok önerilen yanıt (çok sayıda kullanarak ../), ../projenizin dağıtım işletim sisteminin köküne ulaşmaya yetecek kadar eklediğiniz sürece işe yarayacak kirli bir hack'tir .

1. Hedef SCSS yolunu SCSS derleyicisi için bir arama hedefi olarak ekleyin. Bu, stil sayfaları klasörünü scss yapılandırma dosyasına ekleyerek elde edilebilir, bu, kullandığınız çerçevenin işlevidir,

pusula tabanlı çerçeveler için :load_pathsadresinde kullanın config.rd(Örn. raylar)

aşağıdaki kodu kullanabilirsiniz scss-config.jsoniçinfourseven/meteor-scss

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

2. Mutlak yollar kullanın (göreceli yollara karşı).

Örnek, ile fourseven/meteor-scss, {}aşağıdaki örneğe göre projenizin en üst seviyesini vurgulamak için kullanabilirsiniz .

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

Seçilen cevap geçerli bir çözüm sunmuyor.

OP'nin uygulaması düzensiz görünüyor. Paylaşılan / ortak bir dosya normalde partialsstandart bir ortak metin dizininin altında bulunur . Daha sonra partialskodunuzun herhangi bir yerinde kısmi sorunları çözmek için yapılandırma içe aktarma yollarınıza dizin eklemelisiniz .

Bu sorunla ilk kez karşılaştığımda, SASS'nin muhtemelen size Node'unkine benzer bir global değişken verdiğini __dirnameve mevcut çalışma dizini ( cwd) için mutlak bir yol tuttuğunu düşündüm . Maalesef öyle değil ve nedeni bir @importdirektif üzerinde enterpolasyonun mümkün olmaması, dolayısıyla dinamik bir içe aktarma yolu yapamazsınız.

SASS belgelerine göre .

:load_pathsSass yapılandırmanızda ayarlamanız gerekir . OP Pusula'yı kullandığından, bunu buradaki belgelere göre takip edeceğim .

CLI çözümünü amaçlandığı gibi kullanabilirsiniz, ancak neden? eklemek çok daha uygun config.rb. Geçersiz kılmak için CLI kullanmak mantıklı olacaktır config.rb(Örneğin, farklı oluşturma senaryoları).

Bu nedenle, config.rbprojenizin kök dizininde olduğunu varsayarak , aşağıdaki satırı ekleyin: add_import_path 'sub_directory_a'

Ve şimdi @import 'common';her yerde gayet iyi çalışacak.

Bu OP'yi yanıtlarken, daha fazlası var.

Ek

Bir CSS dosyasını gömülü bir şekilde, yani @importCSS'nin kutunun dışında sağladığı vanilya yönergesi aracılığıyla değil , bir CSS dosyası içeriğinin SASS'nizle gerçek bir şekilde birleştirilmesi yoluyla içe aktarmak istediğiniz durumlarla karşılaşmanız olasıdır . Kesin olmayan bir şekilde yanıtlanan başka bir soru daha var (çözüm ortamlar arası çalışmıyor). Çözüm, bu SASS uzantısını kullanmaktır .

Kurulduktan sonra, aşağıdaki satırı yapılandırmanıza ekleyin: require 'sass-css-importer've ardından, kodunuzda bir yere:@import 'CSS:myCssFile';

Bunun çalışması için uzantının atlanması gerektiğine dikkat edin.

Ancak, bir CSS dosyasını varsayılan olmayan bir yoldan içe aktarmaya çalışırken aynı sorunla karşılaşacağız ve add_import_pathCSS dosyalarına uymayacağız. Bunu çözmek için, yapılandırmanıza doğal olarak benzer olan başka bir satır eklemeniz gerekir:

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

Şimdi her şey güzel çalışacak.

Not: sass-css-importerBelgelerin CSS:, .cssuzantının çıkarılmasına ek olarak bir ön ek gerektiğini gösterdiğini fark ettim . Ne olursa olsun işe yaradığını öğrendim. Birisi şimdiye kadar cevapsız kalan bir konu başlattı .

Gulp, sass dosyalarınızı izlemek ve ayrıca includePaths ile diğer dosyanın yollarını eklemek için işi yapacak. misal:

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

node-sass(resmi SASS sarmalayıcı node.js), --include-pathbu tür gereksinimlere yardımcı olmak için bir komut satırı seçeneği sunar.

Misal:

İçinde package.json:

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

Şimdi, src/styles/common.scssprojenizde bir dosyanız varsa, onu @import 'styles/common';projenizin herhangi bir yerine içe aktarabilirsiniz .

Daha fazla ayrıntı için https://github.com/sass/node-sass#usage-1 adresine bakın .

İçe aktarılacak dosyayı tanımlamak için tüm klasörlerin ortak tanımlarını kullanmak mümkündür. Dosyayı tanımladığınız dosyaya bağlı olduğunun farkında olmalısınız. İçe aktarma seçeneği hakkında daha fazla bilgiyi buradan inceleyebilirsiniz .

Visual Studio'da Web Derleyicisi kullanıyorsanız includePath, compilerconfig.json.defaults içindeki yolu ekleyebilirsiniz . Bu ../durumda, derleyici içeri aktarımı aramak için bir konum olarak includePath'i kullanacağından, bir sayıya gerek yoktur .

Örneğin:

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

Bu yarım cevaptır.

Compass'a göz atın , onunla _common.scssbir partialsklasörün içine yerleştirebilir ve ardından onu içe aktarabilirsiniz @import common, ancak her dosyada çalışır.

Ben de aynı problemle karşılaştım. Benim çözümümden buna girdim. İşte kodunuz:

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

Bildiğim kadarıyla, bir scss'yi diğerine aktarmak isteyip istemediğinizi, bunun kısmi olması gerektiğini biliyorum. Farklı dizinden ithal ediyoruz ne zaman isim more_styles.scssTo _more_styles.scss. Sonra bunu template.scssbeğendiğiniz @import'a aktarın ../sub_directory_b/_more_styles.scss. Benim için çalıştı. Ama bahsettiğiniz ../sub_directory_a/_common.scssgibi çalışmıyor. Bu aynı dizindir template.scss. Bu yüzden işe yaramayacak.

İncludePaths parametresini kullanmayı inceleyin ...

"SASS derleyicisi, SASS @import'ları çözümlerken loadPath'lerdeki her yolu kullanır."

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

En iyi yol, kullanıcı sass-loader kullanmaktır. Npm paketi olarak mevcuttur. Yolla ilgili tüm sorunları çözer ve bunu çok kolaylaştırır.

Aynı problemim vardı ve aşağıdaki gibi dosyaya yol ekleyerek çözüm buldum:

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

@import "C: / xampp / htdocs / Scss_addons / Pusula / pusula";