При использовании SASS как я могу импортировать файл из другого каталога?
в SASS можно ли импортировать файл из другого каталога? Например, если бы у меня была такая структура:
- root_directory
- sub_directory_a
- _common.scss
- template.scss
- sub_directory_b
- more_styles.scss
шаблон.scss может импортировать _common.СКС с помощью @import "common" но это возможно для more_styles.scss для импорта _common.СКС? Я пробовал несколько разных вещей, включая @import "../sub_directory_a/common" и @import "../sub_directory_a/_common.scss" но ничего не работает.
13 ответов:
похоже, некоторые изменения в SASS сделали возможным то, что вы изначально пытались сделать:
@import "../subdir/common";мы даже получили эту работу для какой-то совершенно несвязанной папки, расположенной в
c:\projects\sass:@import "../../../../../../../../../../projects/sass/common";достаточно просто добавить
../чтобы убедиться, что вы будете в конечном итоге в корне диска, и вы хорошо идти.конечно, это решение далеко не красиво, но я не мог получить импорт из совершенно другой папки для работы, ни с помощью
I c:\projects\sassни установка переменная окруженияSASS_PATH(из: : ссылка load_paths) к тому же значению.
вы могли бы использовать
-Iпереключатель командной строки или:load_pathsопция из кода Ruby для добавленияsub_directory_aк пути загрузки Sass. Так что если вы бежите Сасс отroot_directory, сделать что-то вроде этого:sass -I sub_directory_a --watch sub_directory_b:sub_directory_bзатем вы можете просто использовать
@import "common"наmore_styles.scss.
С помощью webpack с Sass-loader я могу использовать ~ для ссылки на корневой путь проекта. Например, предполагая структуру папок OPs и что вы находитесь в файле внутри sub_directory_b:
@import "~sub_directory_a/_common";см. раздел Использование / импорт в Sass-loader readme:https://github.com/webpack-contrib/sass-loader
импорт a
.scssфайл, который имеет вложенный импорт с другой относительной позиции не будет работать. верхний предложенный ответ (используя много../) это просто грязный хак, который будет работать так долго, как вы добавили достаточно../чтобы добраться до корня ОС развертывания вашего проекта.
- добавьте целевой путь SCSS в качестве цели поиска для компилятора SCSS. Это может быть достигнуто путем добавления папки stylesheets в файл конфигурации scss, это функция фреймворка вы находитесь используя,
использовать
:load_pathsatconfig.rdдля рамок на основе компаса (например. рельсы)использовать следующий код в
scss-config.jsonнаfourseven/meteor-scss{ "includePaths": [ "{}/node_modules/ionicons/dist/scss/" ] }
- используйте абсолютные пути (по сравнению с относительными путями).
например,
fourseven/meteor-scss, вы можете использовать{}выделить верхний уровень вашего проекта в соответствии со следующим примером@import "{}/node_modules/module-name/stylesheet";
Gulp выполнит работу по просмотру ваших файлов sass, а также добавит пути другого файла с includePaths. пример:
gulp.task('sass', function() { return gulp.src('scss/app.scss') .pipe($.sass({ includePaths: sassPaths }) .pipe(gulp.dest('css')); });
выбранный ответ не предлагает жизнеспособного решения.
практика ОП кажется нерегулярной. Общий/общий файл обычно живет под
partials, стандартный каталог шаблонов. Затем вы должны добавитьpartialsкаталог к вашим путям импорта конфигурации для разрешения частичных файлов в любом месте вашего кода.когда я столкнулся с этой проблемой в первый раз, я подумал, что SASS, вероятно, дает вам глобальную переменную, похожую на узел
__dirname, который сохраняет абсолютный путь к текущий рабочий каталог (cwd). К сожалению, это не так и причина в том, что интерполяция на@importдиректива невозможна, поэтому вы не можете сделать динамический путь импорта.по данным Sass docs.
необходимо указать
:load_pathsв вашей конфигурации Sass. Поскольку OP использует компас, я буду следовать этому в соответствии с документацией здесь.вы можете пойти с решением CLI как намеревались, но почему? это гораздо удобнее добавить его в
config.rb. Было бы разумно использовать CLI для переопределенияconfig.rb(например, различные сценарии сборки).так, если
config.rbнаходится в корне проекта, просто добавьте следующую строку:add_import_path 'sub_directory_a'и теперь
@import 'common';будет работать просто отлично в любом месте.в то время как это отвечает OP, есть еще.
приложение
вы, вероятно, столкнетесь с случаями, когда вы хотите импортировать файл CSS во встроенном манера, то есть не через ваниль
@importдиректива CSS предоставляет из коробки, а фактический слияние содержимого файла CSS с вашим SASS. Есть еще один вопрос, на который отвечают безрезультатно (решение не работает в кросс-среде). Тогда решение состоит в том, чтобы использовать этой расширение SASS.после установки добавьте в свою конфигурацию следующую строку:
require 'sass-css-importer'а потом, где-то в коде:@import 'CSS:myCssFile';обратите внимание, что расширение должно быть опущено, чтобы это работало.
однако мы столкнемся с той же проблемой при попытке импортировать файл CSS из пути не по умолчанию и
add_import_pathне уважает файлы CSS. Поэтому, чтобы решить эту проблему, вам нужно добавить еще одну строку в свою конфигурацию, которая, естественно, похожа:
add_import_path Sass::CssImporter::Importer.new('sub_directory_a')теперь все будет хорошо работать.
С. П., Я заметил
sass-css-importerдокументация указывает наCSS:префикс требуется в дополнение к опущению
для определения файла для импорта можно использовать общие определения всех папок. Вы просто должны знать, что это относительно файла, который вы определяете. Подробнее о опции импорта с примерами вы можете проверить здесь.
это половина ответа.
проверить компас, С его помощью вы можете разместить свой
_common.scssвнутриpartialsпапку, а затем импортировать его с@import common, но он работает в каждый файл.
я столкнулся с такой же проблемой. Из моего решения я пришел к этому. Так вот ваш код:
- root_directory - sub_directory_a - _common.scss - template.scss - sub_directory_b - more_styles.scssнасколько я знаю, если вы хотите импортировать один scss в другой, он должен быть частичным. Когда вы импортируете из другого каталога имя вашего
more_styles.scssto_more_styles.scss. Затем импортируйте его в свойtemplate.scssвот так @import../sub_directory_b/_more_styles.scss. Это сработало для меня. Но, как вы упомянули../sub_directory_a/_common.scssне работает. Это тот же каталогtemplate.scss. Вот почему это не сработает.
изучите использование параметра includePaths...
"компилятор SASS использует каждый путь в loadPaths при разрешении Sass @imports."
node-sass(официальная оболочка SASS дляnode.js) предоставляет параметр командной строки--include-path, чтобы помочь с такими требованиями.пример:
на
package.json:"scripts": { "build-css": "node-sass src/ -o src/ --include-path src/", }теперь, если у вас есть файл
src/styles/common.scssв вашем проекте, вы можете импортировать его с@import 'styles/common';в любом месте вашего проекта.см. https://github.com/sass/node-sass#usage-1 для более подробной информации.
вам на самом деле просто нужно сделать это без "../ "и добавить" _ " в импортируемый файл
в шаблоне.СКС:
@import "sub_directory_b/_more_styles.scss", и more_styles.СКС до _more_styles.СКС
У меня была такая же проблема, и я нашел решение, добавив путь к файлу, как:
@import "C:/xampp/htdocs/Scss_addons/Bootstrap/bootstrap";
@import "C:/xampp/htdocs/Scss_addons/Compass/compass";
Comments