Ist es in SASS möglich, eine Datei aus einem anderen Verzeichnis zu importieren? Wenn ich zum Beispiel eine Struktur wie diese hätte:
- root_directory
- sub_directory_a
- _common.scss
- template.scss
- sub_directory_b
- more_styles.scss
template.scss könnte _common.scss mit importieren, @import "common"
aber ist es möglich, dass more_styles.scss _common.scss importiert? Ich habe versucht , ein paar andere Dinge , einschließlich @import "../sub_directory_a/common"
und @import "../sub_directory_a/_common.scss"
aber nichts scheint zu funktionieren.
-I
? Wenn sich dieser Pfadname ändert, wird viel gesucht und ersetzt. und es erfordert die gleiche lokale Ordnerstruktur von jedem, der die .scssSie können den
-I
Befehlszeilenschalter oder die:load_paths
Option aus Ruby-Code verwenden, umsub_directory_a
den Ladepfad von Sass zu erweitern. Wenn Sie also Sass ausführenroot_directory
, gehen Sie wie folgt vor:Dann können Sie einfach
@import "common"
in verwendenmore_styles.scss
.quelle
-I
Fahnen mehr als ein Verzeichnis, zBsass -I sub_directory_a -I sub_directory_c --watch sub_directory_b:sub_directory_b
Mit Webpack mit Sass-Loader kann ich
~
auf den Projektstammpfad verweisen. Angenommen, Sie nehmen die Ordnerstruktur des Betriebssystems an und befinden sich in einer Datei im Unterverzeichnis_b:Dokumentation: https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules
quelle
node_modules/
und nicht aus dem Stamm des Projekts zu importieren ."sub_directory_a"
meine hinzufügenincludePaths
und die@import "common";
Syntax verwenden, wenn ich die Angular-CLI verwendete, die Sass-Loader enthält.~/
sich das für mich nicht auf das Home-Verzeichnis zu beziehen scheint. Oder irgendein Verzeichnis, das ich zu testen versucht habe. Gibt es eine Möglichkeit, tatsächlich herauszufinden, worauf sich dies bezieht?Das Importieren einer
.scss
Datei mit einem verschachtelten Import mit einer anderen relativen Position funktioniert nicht. Die am häufigsten vorgeschlagene Antwort (mit viel../
) ist nur ein schmutziger Hack, der funktioniert, solange Sie genug hinzugefügt haben../
, um die Wurzel des Bereitstellungsbetriebssystems Ihres Projekts zu erreichen.quelle
meteor
, es war nur ein Beispiel.Die ausgewählte Antwort bietet keine praktikable Lösung.
Die Praxis von OP scheint unregelmäßig. Eine gemeinsam genutzte / gemeinsame Datei befindet sich normalerweise in
partials
einem Standard-Boilerplate-Verzeichnis. Anschließend sollten Siepartials
Ihren Konfigurationsimportpfaden ein Verzeichnis hinzufügen , um Partials an einer beliebigen Stelle in Ihrem Code aufzulösen.Als ich zum ersten Mal auf dieses Problem stieß, stellte ich fest, dass SASS Ihnen wahrscheinlich eine globale Variable ähnlich der von Node gibt
__dirname
, die einen absoluten Pfad zum aktuellen Arbeitsverzeichnis (cwd
) beibehält. Dies ist leider nicht der Fall, und der Grund dafür ist, dass eine Interpolation einer@import
Direktive nicht möglich ist. Daher können Sie keinen dynamischen Importpfad erstellen.Laut SASS-Dokumenten .
Sie müssen
:load_paths
in Ihrer Sass-Konfiguration einstellen . Da OP Compass verwendet, werde ich dies gemäß der Dokumentation hier befolgen .Sie können die CLI-Lösung wie vorgesehen verwenden, aber warum? Es ist viel bequemer, es hinzuzufügen
config.rb
. Es wäre sinnvoll, CLI zum Überschreiben zu verwendenconfig.rb
(z. B. verschiedene Build-Szenarien).Angenommen, Sie
config.rb
befinden sich unter dem Projektstamm, fügen Sie einfach die folgende Zeile hinzu:add_import_path 'sub_directory_a'
Und jetzt
@import 'common';
wird überall gut funktionieren.Während dies OP beantwortet, gibt es noch mehr.
Blinddarm
Es ist wahrscheinlich, dass Sie auf Fälle stoßen, in denen Sie eine CSS-Datei auf eingebettete Weise importieren möchten, dh nicht über die Vanilla-
@import
Direktive, die CSS standardmäßig bereitstellt, sondern über die tatsächliche Zusammenführung eines CSS-Dateiinhalts mit Ihrem SASS. Es gibt noch eine andere Frage , die nicht eindeutig beantwortet wird (die Lösung funktioniert nicht umgebungsübergreifend). Die Lösung besteht dann darin, diese SASS-Erweiterung zu verwenden.Fügen Sie nach der Installation Ihrer Konfiguration die folgende Zeile hinzu:
require 'sass-css-importer'
und dann irgendwo in Ihrem Code:@import 'CSS:myCssFile';
Beachten Sie, dass die Erweiterung weggelassen werden muss, damit dies funktioniert.
Beim Versuch, eine CSS-Datei aus einem nicht standardmäßigen Pfad zu importieren, tritt jedoch dasselbe Problem auf, und
add_import_path
CSS-Dateien werden nicht berücksichtigt. Um dies zu lösen, müssen Sie eine weitere Zeile in Ihrer Konfiguration hinzufügen, die natürlich ähnlich ist:add_import_path Sass::CssImporter::Importer.new('sub_directory_a')
Jetzt wird alles gut funktionieren.
PS: Ich habe festgestellt, dass in der
sass-css-importer
Dokumentation angegebenCSS:
ist, dass zusätzlich zum Weglassen der.css
Erweiterung ein Präfix erforderlich ist . Ich fand heraus, dass es trotzdem funktioniert. Jemand hat ein Problem gestartet , das bisher unbeantwortet blieb.quelle
Gulp erledigt die Aufgabe, Ihre Sass-Dateien zu überwachen und mit includePaths auch Pfade anderer Dateien hinzuzufügen. Beispiel:
quelle
-I
Option über die Befehlszeile verwendet, oder?node-sass
(der offizielle SASS-Wrapper fürnode.js
) bietet eine Befehlszeilenoption--include-path
, um bei solchen Anforderungen zu helfen.Beispiel:
In
package.json
:Wenn Sie jetzt eine Datei
src/styles/common.scss
in Ihrem Projekt haben, können Sie diese mit einer@import 'styles/common';
beliebigen Stelle in Ihrem Projekt importieren .Weitere Informationen finden Sie unter https://github.com/sass/node-sass#usage-1 .
quelle
Um die zu importierende Datei zu definieren, können Sie alle allgemeinen Definitionen der Ordner verwenden. Sie müssen sich nur bewusst sein, dass es sich um eine Datei handelt, die Sie definieren. Weitere Informationen zur Importoption mit Beispielen finden Sie hier .
quelle
Wenn Sie Web Compiler in Visual Studio verwenden, können Sie den Pfad
includePath
in compilerconfig.json.defaults hinzufügen . Dann ist eine gewisse Anzahl nicht erforderlich,../
da der Compiler includePath als Speicherort für den Import verwendet.Beispielsweise:
quelle
Dies ist eine halbe Antwort.
Schauen Sie sich Compass an , damit können Sie Ihre
_common.scss
in einenpartials
Ordner legen und dann mit importieren@import common
, aber es funktioniert in jeder Datei.quelle
Ich bin auf das gleiche Problem gestoßen. Aus meiner Lösung bin ich darauf gekommen. Also hier ist dein Code:
Soweit ich weiß, wenn Sie ein scss in ein anderes importieren möchten, muss es ein Teil sein. Wenn Sie von anderem Verzeichnis importieren , benennen Sie
more_styles.scss
zu_more_styles.scss
. Dann importiere es in deintemplate.scss
wie folgt @import../sub_directory_b/_more_styles.scss
. Es hat bei mir funktioniert. Aber wie du schon erwähnt../sub_directory_a/_common.scss
nicht funktioniert. Das ist das gleiche Verzeichnis dertemplate.scss
. Deshalb wird es nicht funktionieren.quelle
Verwenden Sie den Parameter includePaths ...
"Der SASS-Compiler verwendet jeden Pfad in loadPaths, wenn SASS @imports aufgelöst wird."
https://stackoverflow.com/a/33588202/384884
quelle
Der beste Weg ist, Sass-Loader zu verwenden. Es ist als npm-Paket erhältlich. Es löst alle pfadbezogenen Probleme und macht es super einfach.
quelle
Ich hatte das gleiche Problem und fand eine Lösung, indem ich einen Pfad zur Datei hinzufügte wie:
@import "C: / xampp / htdocs / Scss_addons / Bootstrap / bootstrap";
@import "C: / xampp / htdocs / Scss_addons / Compass / compos";
quelle