При использовании 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" но ничего не работает.

971   13  

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 файл, который имеет вложенный импорт с другой относительной позиции не будет работать. верхний предложенный ответ (используя много ../) это просто грязный хак, который будет работать так долго, как вы добавили достаточно ../ чтобы добраться до корня ОС развертывания вашего проекта.

  1. добавьте целевой путь SCSS в качестве цели поиска для компилятора SCSS. Это может быть достигнуто путем добавления папки stylesheets в файл конфигурации scss, это функция фреймворка вы находитесь используя,

использовать :load_paths at config.rd для рамок на основе компаса (например. рельсы)

использовать следующий код в scss-config.json на fourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}
  1. используйте абсолютные пути (по сравнению с относительными путями).

например,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.scss to _more_styles.scss. Затем импортируйте его в свой template.scss вот так @import ../sub_directory_b/_more_styles.scss. Это сработало для меня. Но, как вы упомянули ../sub_directory_a/_common.scss не работает. Это тот же каталог template.scss. Вот почему это не сработает.

изучите использование параметра includePaths...

"компилятор SASS использует каждый путь в loadPaths при разрешении Sass @imports."

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

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

    Ничего не найдено.