Ответ 1

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

@import "../subdir/common";

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

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

Просто добавьте достаточно ../, чтобы убедиться, что вы попадете в корень диска, и вам будет хорошо.

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

Ответ 2

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

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

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

Ответ 3

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

@import "~sub_directory_a/_common";

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

Ответ 4

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

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

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

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

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

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

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

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

Ответ 5

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

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

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

В соответствии с документами SASS.

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

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

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

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

Пока на это отвечает ОП, там больше.

аппендикс

Скорее всего, вы @import случаями, когда вы хотите импортировать CSS файл во встроенном виде, то есть не через директиву vanilla @import предоставляемую CSS "из коробки", а в результате фактического слияния содержимого CSS файла с вашим SASS. Есть еще один вопрос, на который нет однозначного ответа (решение не работает в кросс-среде). Решение в том, чтобы использовать это расширение SASS.

После установки добавьте в вашу конфигурацию следующую строку: require 'sass-css-importer' и затем где-нибудь в вашем коде: @import 'CSS:myCssFile';

Обратите внимание, что расширение должно быть опущено, чтобы это работало.

Однако мы add_import_path той же проблемой при попытке импортировать файл CSS по пути, add_import_path пути по умолчанию, а add_import_path не add_import_path файлы CSS. Итак, чтобы решить это, вам нужно добавить еще одну строку в вашем конфиге, которая, естественно, похожа:

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

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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 для получения более подробной информации.

Ответ 9

Это половина ответа.

Отъезд Compass, с ним вы можете поместить свой _common.scss в папку partials, а затем импортировать его с помощью @import common, но он работает в каждом файле.

Ответ 10

Я столкнулся с той же проблемой. Из моего решения я вошел в это. Итак, вот ваш код:

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

Насколько я знаю, если вы хотите импортировать один scss в другой, это должно быть частичным. Когда вы импортируете из другого каталога имя more_styles.scss в _more_styles.scss. Затем импортируйте его в свой template.scss, как этот @import ../sub_directory_b/_more_styles.scss. Это сработало для меня. Но, как вы сказали, ../sub_directory_a/_common.scss не работает. Это тот же каталог template.scss. Вот почему это не сработает.

Ответ 11

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

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

fooobar.com/questions/416989/...

Ответ 12

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

Например:

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

Ответ 13

Лучший способ - это использовать sass-loader. Это доступно как пакет npm. Он решает все проблемы, связанные с путями, и делает его очень простым.

Ответ 14

Вам просто нужно сделать это без "../" и добавить "_" к импортируемому файлу

В template.scss:

@import "sub_directory_b/_more_styles.scss"

И измените more_styles.scss на _more_styles.scss

Ответ 15

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

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

Ответ 16

У меня была такая же проблема, и я нашел решение, добавив путь к файлу, например:

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

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