У 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"але, здається, нічого не працює.

Схоже, деякі зміни до 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. Отже, якщо у вас запущений Sass root_directory, зробіть щось подібне:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Тоді ви можете просто використовувати @import "common"в more_styles.scss.

Використовуючи webpack із sass-loader, я можу використати ~посилання на кореневий шлях проекту. Наприклад, якщо припустити структуру папок OP і що ви перебуваєте у файлі всередині sub_directory_b:

@import "~sub_directory_a/_common";

Документація: https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

Імпорт .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";

Вибрана відповідь не пропонує життєздатного рішення.

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

Коли я вперше зіткнувся з цією проблемою, я зрозумів, що SASS, ймовірно, дає вам глобальну змінну, подібну до Node __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';буде працювати нормально де завгодно.

Хоча це відповідає на ОП, є й більше.

Додаток

Ймовірно, ви зіткнетеся з випадками, коли ви хочете імпортувати файл 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')

Тепер все буде працювати приємно.

PS, я помітив, що sass-css-importerдокументація вказує на CSS:необхідність префікса на додаток до опускання .cssрозширення. Я виявив, що це працює незалежно. Хтось запустив випуск , який досі залишався без відповіді.

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

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

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 .

Для визначення файлу для імпорту можна використовувати загальні визначення всіх папок. Ви просто повинні знати, що це відносно файлу, який ви визначаєте. Детальніше про опцію імпорту з прикладами ви можете перевірити тут .

Якщо ви використовуєте веб-компілятор у Visual Studio, ви можете додати шлях до includePathв compilerconfig.json.defaults. Тоді немає необхідності в деякій кількості, ../оскільки компілятор використовуватиме includePath як місце для пошуку імпорту.

Наприклад:

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

Це половина відповіді.

Перевірте компас , за допомогою нього ви можете розмістити _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."

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

Найкращий спосіб - це користувач sass-loader. Він доступний як пакет npm. Він вирішує всі проблеми, пов'язані з шляхом, і робить це надзвичайно простим.

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

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

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