Как скомпилировать SCSS на клиенте с помощью JS?

Question

[lightalex]

Приветствую!
Пытался прописать импорт:

import sass from 'sass';
import nodeSass from 'node-sass';

Но Webpack отказывается подключать данные пакеты, так как они ссылаются на серверные пакеты типа 'fs' и 'path', которые, по понятным причинам, не доступны на клиенте.
Подскажите пожалуйста, как можно скомпилировать SCSS из строки на клиентской стороне?

Comments

[WapSter]

Нет

[Василий Банников]

node-sass нельзя использовать на клиенте, тк он зависит от нативных библиотек.
Можно попробовать sass.js

Answer 1

[Vladimir Abdullaev]

Во-первых. Дайте больше информации. Куда это вы пытались прописать?

Во-вторых, попытаюсь ответить по заголовку. А зачем отправлять клиенту .scss файл? Это препроцессор, в продакшн должен улететь уже собранный, обработанный файл .css.

Comments

[lightalex]

1) Не очень понимаю вопрос. В каком смысле "Куда это вы пытались прописать"? В JS-файл, который потом собирался WebPack'ом в конечный JS'ник. Вы об этом?

2) Так в вопрос был не в том "Нужно ли отправлять клиенту готовый CSS или можно отправить прямо SCSS?" :)
Видимо авторы sass и node-sass также однобоко рассматривали использование своего препроцессора, не уделяя внимания тому, что иногда, в редких случаях, SCSS может создаваться клиентом прямо в браузере. Но у меня именно такая ситуация. SCSS печатается в браузере на клиенте самим юзером.
Сразу уточню, что вариант "А почему бы не отправить SCSS на сервер для компиляции?" не подходит, так как это не целесообразно.

[den00014]

lightalex,
import sass from 'sass'

sass.renderSync({
data: 'string',
})
.css.toString()

Так же стоит учесть что вам возможно могут понадобиться модули postcss и autoprefixer, если я правильно понимаю вашу задумку

Дочитал вашу проблему. Возможно если указать в конфигурации webpack target: 'node', это исправит ситуацию.
Так же удостоверьтесь что модуль sass находится в dependencies, а не в devDependencies

Answer 2

[den00014]

Рабочий вариант: https://github.com/medialize/sass.js/blob/master/d...