При использовании SASS, как я могу импортировать файл из другого каталога?

Question

В SASS возможно ли импортировать файл из другого каталога? Например, если бы у меня была такая структура:

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

template.scss может импортировать _common.scss, используя @import "common", но возможно ли more_styles.scss импортировать _common.scss? Я пробовал несколько разных вещей, включая @import "../sub_directory_a/common" и @import "../sub_directory_a/_common.scss", но, похоже, ничего не работает.

Answer 1

Похоже, некоторые изменения в SASS сделали возможным то, что вы изначально пытались сделать:

@import "../subdir/common";

Мы даже заставили это работать для какой-то совершенно не связанной папки, расположенной в c:\projects\sass:

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

Просто добавьте достаточно ../, чтобы быть уверенным, что вы окажетесь в корневом каталоге диска, и все готово.

Конечно, это решение далеко не красиво, но я не смогне удается выполнить импорт из совершенно другой папки, не используя I c:\projects\sass и не устанавливая переменную среды SASS_PATH (из: : ссылка на load_paths ) в то же значение.

Answer 2

Вы можете использовать параметр командной строки -I или параметр :load_paths из кода Ruby, чтобы добавить sub_directory_a к пути загрузки Sass.Поэтому, если вы используете Sass от root_directory, сделайте что-то вроде этого:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Тогда вы можете просто использовать @import "common" в more_styles.scss.

Answer 3

Используя webpack с sass-загрузчиком, я могу использовать ~ для ссылки на корневой путь проекта.Например, если предположить структуру папок OPs и вы находитесь в файле внутри sub_directory_b:

@import "~sub_directory_a/_common";

См. Раздел Использование / Импорт в файле readme для sass-загрузчика: https://github.com/webpack-contrib/sass-loader

Answer 4

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

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

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

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

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

2. Используйте абсолютные пути (по сравнению с относительными путями).

Пример, с fourseven/meteor-scss, вы можете использовать {}, чтобы выделить верхний уровень вашего проекта в соответствии со следующим примером

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

Answer 5

Выбранный ответ не предлагает жизнеспособного решения.

Практика ОП кажется нерегулярной. Общий / общий файл обычно находится в partials, стандартном шаблонном каталоге. Затем вам нужно добавить каталог partials в пути импорта конфигурации, чтобы разрешить партиалы в любом месте вашего кода.

Когда я впервые столкнулся с этой проблемой, я подумал, что SASS, вероятно, дает вам глобальную переменную, аналогичную Node's __dirname, которая сохраняет абсолютный путь к текущему рабочему каталогу (cwd). К сожалению, это не так, и причина в том, что интерполяция по директиве @import невозможна, поэтому вы не можете выполнить динамический путь импорта.

Согласно SASS документы .

Вам необходимо установить :load_paths в вашей конфигурации Sass. Поскольку OP использует Compass, я буду следовать этому в соответствии с документацией здесь .

Вы можете использовать решение CLI по назначению, но почему? гораздо удобнее добавить его в config.rb. Было бы целесообразно использовать CLI для переопределения config.rb (например, различные сценарии сборки).

Итак, предполагая, что ваш config.rb находится в корневом каталоге проекта, просто добавьте следующую строку: add_import_path 'sub_directory_a'

А теперь @import 'common'; будет отлично работать где угодно.

Пока это отвечает OP, есть еще.

Приложение

Скорее всего, вы столкнетесь со случаями, когда вы хотите импортировать файл CSS во встроенном виде, то есть не через директиву vanilla @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')

Теперь все будет хорошо работать.

P.S., Я заметил, что в документации sass-css-importer указано, что для пропуска расширения .css требуется префикс CSS:. Я узнал, что это работает независимо. Кто-то начал выпуск , который до сих пор оставался без ответа.

Answer 6

Gulp выполнит работу по просмотру ваших файлов sass, а также добавит пути к другим файлам с помощью includePaths. Пример:

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

Answer 7

node-sass (официальная оболочка SASS для node.js) предоставляет параметр командной строки --include-path, чтобы помочь с такими требованиями.

Пример:

In 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.

Answer 8

Для определения файла для импорта можно использовать общие определения всех папок. Вам просто нужно знать, что это относительно файла, который вы определяете. Подробнее об опции импорта с примерами вы можете проверить здесь .

Answer 9

При использовании веб-компилятор в Visual Studio вы можете добавить путь к includePath в compilerconfig.json.defaults. Тогда нет необходимости в некотором числе ../, так как компилятор будет использовать includePath в качестве места для поиска импорта.

Например:

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

Answer 10

В современной версии Sass (по крайней мере 1.17.3) он фактически работает как ожидалось: вы можете использовать относительные пути с ../ в них из коробки .

Ни ужас, опубликованный в текущем принятом ответе , ни какие-либо дополнительные директивы или плагины по настройке в настоящее время не нужны.