Node-sass с несколькими входными файлами

Я использую node-sass непосредственно из командной строки (на самом деле Makefile) для создания моего CSS.

Файлы scss находятся в разных каталогах и не ссылаются друг на друга. Я бы хотел, чтобы эти файлы были преобразованы в единый вывод CSS, который я мог бы прочитать из HTML, с работающими исходными картами.

Это текущая команда, которую я имею в Makefile:

$(OUT_MAIN_CSS): $(SCSS) Makefile $(node-sass)
    cat $(SCSS) > $(TMP_SCSS)
    $(node-sass) --output-style compressed --source-map $(OUT_MAIN_CSS).map $(TMP_SCSS) $@
    rm $(TMP_SCSS)

OUT_MAIN_CSS это out/bundle.css. SCSS — это список входных файлов. node-sass это node_modules/.bin/node-sass.

Я хотел бы иметь однострочник и не нуждаться во временном файле. Кроме того, я хотел бы, чтобы мои ссылки на исходную карту (для отладки) приводили к исходным файлам, а не к временному файлу.

синтаксис node-sass 1

node-sass [options] <input.scss> [output.css]

Здесь node-sass настаивает на наличии только одного входного файла. Если у меня есть два или более, второй обрабатывается как вывод, а его содержимое переопределяется.

Есть несколько опций для "входного каталога" и "выходного каталога", но я не хочу ограничивать свои процессы сборки такими довольно произвольными ограничениями (да, в конце концов я согнусь...).

синтаксис node-sass 2

cat <input.scss> | node-sass [options] > output.css

Это больше соответствует менталитету Unix. Проблема двоякая. Мой выходной файл находится в подкаталоге (out/bundle.css), что сбивает с толку ссылки на исходную карту, поскольку node-sass не знает выходного пути.

Кажется, для этого есть --source-map-root, но у меня не получилось...

Здесь я очевидно помещаю квадратный болт в круглое отверстие, не так ли? Как бы вы это сделали?

Лучший способ просто иметь один ring.scss в корне, собрать все несвязанные части вместе, а затем подтвердить это?


npm sass node-sass
person akauppi    schedule 22.05.2015    source источник
comment
То, как я это решил: фактически введение зависимостей между файлами scss (они являются компонентами, некоторые из которых принадлежат более крупному). Таким образом, главному (прикладному) файлу scss достаточно импортировать несколько самых верхних. В этом смысле исходные карты верны. Я выровнен.   -  person akauppi    schedule 22.05.2015

Ответы (5)


arrow_upward
8
arrow_downward

Почему бы не создать один файл main Sass, импортировать в него все ваши файлы и скомпилировать файл main с помощью node-sass? В результате должен получиться один файл с правильными исходными картами.

person RobW    schedule 27.08.2015
comment
Наверное, путь. Я экспериментировал с использованием Sass, пытаясь объединить традиционные инструменты сборки Unix и инструменты сборки JavaScript. Интересно, как по-разному чувствуют себя эти двое. - person akauppi; 28.08.2015
comment
Да, изначально Sass тоже был инструментом Ruby, так что с ним происходят всякие странности :). - person RobW; 30.08.2015
comment
Я не могу этого сделать, потому что мне нужны разные css для разных страниц, но есть некоторые файлы, которые я не хочу компилировать, потому что они сами по себе ничего не делают. - person Stephen; 27.04.2016
comment
Обновление: он автоматически знает, что не компилировать файлы, начинающиеся с _, поэтому просто указание корневого каталога стилей в качестве входных данных делает то, что мне нужно. - person Stephen; 27.04.2016
comment
Другим вариантом использования может быть библиотека компонентов, требующая, чтобы стили для каждого были аккуратно скомпилированы в структуру типов css/components/my-button/module.css. - person Kevin H.; 26.03.2020

arrow_upward
4
arrow_downward

Например, если вы хотите скомпилировать каждый файл *.scss в папке src/assets/scss и вывести результирующие файлы *.css в папку dist, вы можете добавить скрипт в файл package.json:

{
  "scripts": {
    "build:css": "node-sass -o dist src/assets/scss/",
...

и запустите процесс компиляции из командной строки с помощью:

npm run build:css

если вы хотите компилировать рекурсивно, добавьте флаг --recursive в команду:

{
  "scripts": {
    "build:css": "node-sass --recursive -o dist src/assets/scss/",
...
person Sergio Belevskij    schedule 21.04.2020

arrow_upward
1
arrow_downward

Это отлично работает

node-sass <input1.scss> [output1.css] && node-sass <input2.scss> [output2.css]
person Tauqeer Hassan    schedule 07.01.2019

arrow_upward
0
arrow_downward

Из соображений производительности мне пришлось использовать отдельный index.scss. Поэтому я использовал папку вместо одного файла, и это работает. Например.:

node-sass [options] styles/ [output.css]
person carkod    schedule 03.02.2018
comment
Не получится, из документов - The input can be either a single .scss or .sass, or a directory. If the input is a directory the --output flag must also be supplied. - person Janis; 14.04.2020

arrow_upward

arrow_downward

person    schedule
comment
Спасибо за этот фрагмент кода, который может предоставить некоторую ограниченную немедленную помощь. Надлежащее объяснение значительно повысило бы его долгосрочную ценность, показав, почему это хорошее решение проблемы, и сделало бы его более полезным для будущих читателей с другими подобными вопросами. Пожалуйста, отредактируйте свой ответ, чтобы добавить некоторые пояснения, включая сделанные вами предположения. - person flaxel; 30.11.2020