Czy w SASS można zaimportować plik z innego katalogu? Na przykład, gdybym miał taką strukturę:

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

template.scss może importować plik _common.scss przy użyciu, @import "common"ale czy plik more_styles.scss może importować plik _common.scss? Próbowałem kilku różnych rzeczy, w tym @import "../sub_directory_a/common"i @import "../sub_directory_a/_common.scss"ale wydaje się, że nic nie działa.

Wygląda na to, że pewne zmiany w SASS umożliwiły to, co początkowo próbowałeś:

@import "../subdir/common";

Udało nam się to nawet zadziałać dla jakiegoś zupełnie niepowiązanego folderu znajdującego się w c:\projects\sass:

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

Po prostu dodaj wystarczająco dużo, ../aby upewnić się, że skończysz w katalogu głównym dysku i jesteś gotowy do pracy.

Oczywiście to rozwiązanie nie jest ładne, ale nie mogłem uzyskać importu z zupełnie innego folderu do pracy, ani używając I c:\projects\sassani nie ustawiając zmiennej środowiskowej SASS_PATH(z :: load_paths reference ) na tę samą wartość.

Możesz użyć -Iprzełącznika wiersza poleceń lub :load_pathsopcji z kodu Ruby, aby dodać sub_directory_ado ścieżki ładowania Sassa. Więc jeśli używasz Sass z root_directory, zrób coś takiego:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Następnie możesz po prostu użyć @import "common"w more_styles.scss.

Używając webpacka z sass-loaderem, mogę ~odwołać się do ścieżki głównej projektu. Na przykład zakładając strukturę folderów OP i że jesteś w pliku wewnątrz sub_directory_b:

@import "~sub_directory_a/_common";

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

Importowanie .scsspliku z zagnieżdżonym importem o innej pozycji względnej nie będzie działać. najczęściej proponowaną odpowiedzią (używającą dużo ../) jest po prostu brudny hack, który będzie działał tak długo, jak długo dodasz wystarczająco dużo, ../aby dotrzeć do katalogu głównego systemu operacyjnego wdrażania projektu.

1. Dodaj docelową ścieżkę SCSS jako cel wyszukiwania dla kompilatora SCSS. Można to osiągnąć, dodając folder stylesheets do pliku konfiguracyjnego scss, jest to funkcja używanego frameworka,

używaj :load_pathsw config.rdprzypadku struktur opartych na kompasie (np. szyny)

użyj następującego kodu w scss-config.jsonforfourseven/meteor-scss

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

2. Użyj ścieżek bezwzględnych (zamiast ścieżek względnych).

Na przykład za pomocą programu fourseven/meteor-scssmożesz {}wyróżnić najwyższy poziom swojego projektu, jak na poniższym przykładzie

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

Wybrana odpowiedź nie jest realnym rozwiązaniem.

Praktyka OP wydaje się nieregularna. Plik współdzielony / wspólny zwykle partialsznajduje się w standardowym katalogu standardowym. Następnie należy dodać partialskatalog do ścieżek importu konfiguracji, aby rozwiązać częściowe w dowolnym miejscu w kodzie.

Kiedy napotkałem ten problem po raz pierwszy, pomyślałem, że SASS prawdopodobnie daje ci zmienną globalną podobną do zmiennej Node __dirname, która zachowuje bezwzględną ścieżkę do bieżącego katalogu roboczego ( cwd). Niestety tak się nie dzieje, a powodem jest to, że interpolacja @importdyrektywy nie jest możliwa, dlatego nie można wykonać dynamicznej ścieżki importu.

Według docs SASS .

Musisz ustawić :load_pathsw konfiguracji Sassa. Ponieważ OP używa Compass, będę postępować zgodnie z dokumentacją tutaj .

Możesz przejść z rozwiązaniem CLI zgodnie z przeznaczeniem, ale dlaczego? o wiele wygodniej jest go dodać config.rb. Sensowne byłoby użycie CLI do nadpisywania config.rb(np. Różne scenariusze kompilacji).

Zakładając, że config.rbznajdujesz się w katalogu głównym projektu, po prostu dodaj następujący wiersz: add_import_path 'sub_directory_a'

A teraz @import 'common';będzie działać dobrze wszędzie.

Podczas gdy to odpowiada OP, jest więcej.

dodatek

Prawdopodobnie napotkasz przypadki, w których chcesz zaimportować plik CSS w sposób osadzony, to znaczy nie za pomocą @importdyrektywy waniliowej, którą CSS zapewnia po wyjęciu z pudełka, ale rzeczywiste połączenie zawartości pliku CSS z SASS. Jest jeszcze jedno pytanie , na które udzielono odpowiedzi niejednoznacznej (rozwiązanie nie działa w różnych środowiskach). Rozwiązaniem jest więc użycie tego rozszerzenia SASS.

Po zainstalowaniu dodaj następujący wiersz do konfiguracji: require 'sass-css-importer'a następnie gdzieś w kodzie:@import 'CSS:myCssFile';

Zauważ, że rozszerzenie musi zostać pominięte, aby to zadziałało.

Jednak napotkamy ten sam problem podczas próby zaimportowania pliku CSS ze ścieżki innej niż domyślna i add_import_pathnie obsługuje plików CSS. Aby rozwiązać ten problem, musisz dodać kolejną linię w konfiguracji, która jest oczywiście podobna:

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

Teraz wszystko będzie ładnie działać.

PS, zauważyłem, że sass-css-importerdokumentacja wskazuje, że CSS:oprócz pominięcia .cssrozszerzenia wymagany jest przedrostek . Dowiedziałem się, że to działa niezależnie. Ktoś rozpoczął problem , który do tej pory pozostawał bez odpowiedzi.

Gulp wykona zadanie oglądania twoich plików sass, a także dodawania ścieżek do innych plików za pomocą includePaths. przykład:

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

node-sass(oficjalny wrapper dla SASS node.js) udostępnia opcję wiersza poleceń, --include-pathktóra pomaga w takich wymaganiach.

Przykład:

W package.json:

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

Teraz, jeśli masz plik src/styles/common.scssw swoim projekcie, możesz go zaimportować w @import 'styles/common';dowolnym miejscu w projekcie.

Więcej informacji można znaleźć pod adresem https://github.com/sass/node-sass#usage-1 .

Aby zdefiniować plik do zaimportowania, można użyć wspólnych definicji wszystkich folderów. Musisz tylko mieć świadomość, że jest to zależne od pliku, który go definiujesz. Więcej na temat opcji importu z przykładami możesz sprawdzić tutaj .

Jeśli używasz kompilatora sieci Web w programie Visual Studio, możesz dodać ścieżkę do includePathw pliku compilerconfig.json.defaults. Wtedy nie ma potrzeby ../określania pewnej liczby, ponieważ kompilator użyje funkcji includePath jako lokalizacji do wyszukania importu.

Na przykład:

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

To jest połowa odpowiedzi.

Sprawdź Compass , dzięki któremu możesz umieścić swój folder _common.scssw partialsfolderze, a następnie zaimportować go @import common, ale działa w każdym pliku.

Napotkałem ten sam problem. Z mojego rozwiązania doszedłem do tego. Oto twój kod:

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

O ile wiem, jeśli chcesz zaimportować jeden plik scss do drugiego, musi to być fragment. Podczas importowania z innego katalogu, nazwij swój plik more_styles.scssdo _more_styles.scss. Następnie zaimportuj go do swojego template.scsspodobnego @import ../sub_directory_b/_more_styles.scss. U mnie to zadziałało. Ale jak wspomniałeś, ../sub_directory_a/_common.scssnie działa. To ten sam katalog template.scss. Dlatego to nie zadziała.

Zapoznaj się z użyciem parametru includePaths ...

„Kompilator SASS używa każdej ścieżki w loadPaths podczas rozpoznawania SASS @imports”.

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

Najlepszym sposobem jest skorzystanie z programu sass-loader. Jest dostępny jako pakiet npm. Rozwiązuje wszystkie problemy związane ze ścieżką i czyni to bardzo łatwym.

Miałem ten sam problem i znalazłem rozwiązanie, dodając ścieżkę do pliku:

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

@import "C: / xampp / htdocs / Scss_addons / Compass / compass";