SCSS import

@andyj · Регистрация: 16.03.2017

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите плииз.

Пытаюсь в консоли настроить scss "компилятор" (на основе node)

2 папки - источник (scss) и "результат" (css)

основной файл:
scss\main.scss

стили кнопок:
scss\_button1.scss
scss\_button2.scss
scss\_button3.scss

_button'ы через @import вставляю в main.scss

В результате хочу получить ТОЛЬКО main.css.
А получаю в папке css еще и стили кнопок, или файлы-"пустышки" от файлов с функциями (без классов)...

вынужден вручную очищать папку перед отправкой на сервер!

Можно либо определенные "маски" файлов исходников задать в исключения, либо есть ключ для пометки кода "только для импорта"?

@shvyrevvg · 25.08.2018, 06:34

Сообщение от andyj

Пытаюсь в консоли настроить scss "компилятор" (на основе node)

Что есть компилятор на основе node?

Сообщение от andyj

Можно либо определенные "маски" файлов исходников задать в исключения, либо есть ключ для пометки кода "только для импорта"?

Обычно компиляторы не создают выходные файлы для исходников начинающихся с _. Если gulp-ом собираете, то можно задать маску "./scss/[^_]*.scss"

@andyj · 25.08.2018, 06:49 **[ТС]**

Сообщение от shvyrevvg

Что есть компилятор на основе node?

До этого был на основе руби или питона. Нашел нодовский. Вроде этот (node-sass):
https://www.npmjs.com/package/node-sass

Сообщение от shvyrevvg

Обычно компиляторы не создают выходные файлы для исходников начинающихся с _

у меня при изменении этих файлов (_*.scss) успешно создает результат (_*.css). После чего сам успешно пересоздает main.css (как-то "следит" что этот файл "зависит" от _button) с новым импортом и в папке с результатом вижу 2 файла main.css и _button.css

Сообщение от shvyrevvg

Если gulp-ом собираете, то можно задать маску "./scss/[^_]*.scss"

Пользуюсь простой "следилкой" встроенной в node-sass вызываемой прямо из батника

Bash
1
CMD /C node-sass --output-style --error-bell --watch --source-map-contents %path_scss% --output %path_css%

@shvyrevvg · 25.08.2018, 07:52

andyj, похоже что только указывая в path_scss один файл main.scss можно избавиться от файлов с _.

Добавлено через 2 минуты
Поставил node-sass, у меня все норм. - пересобирает только main.scss.

Добавлено через 1 минуту
Запускал так

Bash
1
./node_modules/.bin/node-sass --output-style --error-bell -watch --source-map-contents scss/ --output css/

@andyj · 25.08.2018, 07:54 **[ТС]**

ясно. спасибо! а если гулп настроить, то можно начать фильтровать???

Сообщение от shvyrevvg

Поставил node-sass, у меня все норм. - пересобирает только main.scss.

Измени при включенной "следилке" _button.scss. У меня при этом создается _button.css, и пересоздается main.css

Добавлено через 46 секунд

Сообщение от shvyrevvg

./node_modules/.bin/node-sass --output-style --error-bell -watch --source-map-contents scss/ --output css/

У меня похожий путь!

@shvyrevvg · 25.08.2018, 07:58

Сообщение от andyj

Измени при включенной "следилке" _button.scss. У меня при этом создается _button.css, и пересоздается main.css

Менял, все в норме.

Сообщение от andyj

а если гулп настроить, то можно начать фильтровать???

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

@andyj · 25.08.2018, 08:00 **[ТС]**

Сообщение от shvyrevvg

какие файлы будут попадать на вход компилятора

меня больше беспокоит чтобы исключая _*.scss я не заблокировал возможность собрать main.scss с его импортами этих имен.

@shvyrevvg · 25.08.2018, 08:03

andyj, все норм, он же обрабатывает import-ы во всех scss, а на выходе будут только те что попали на вход.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@andyj 274 / 178 / 30 Регистрация: 16.03.2017 Сообщений: 1,631

	SCSS import 25.08.2018, 06:22. Показов 1034. Ответов 7 Метки scss (Все метки) Добрый день, подскажите плииз. Пытаюсь в консоли настроить scss "компилятор" (на основе node) 2 папки - источник (scss) и "результат" (css) основной файл: scss\main.scss стили кнопок: scss\_button1.scss scss\_button2.scss scss\_button3.scss _button'ы через @import вставляю в main.scss В результате хочу получить ТОЛЬКО main.css. А получаю в папке css еще и стили кнопок, или файлы-"пустышки" от файлов с функциями (без классов)... вынужден вручную очищать папку перед отправкой на сервер! Можно либо определенные "маски" файлов исходников задать в исключения, либо есть ключ для пометки кода "только для импорта"? 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	25.08.2018, 08:03
	andyj, все норм, он же обрабатывает import-ы во всех scss, а на выходе будут только те что попали на вход. 1