Как правильно задать путь в webstorm FileWatcher для компиляции CSS из sass в нужную папку?
Как сделать так, что бы код из папки sass файла main.sass компилировался в папку css в файл main.css?
Дополнительно:
package.json:
"scripts": { "sass-dev": "sass --watch --update --style=expanded assets/scss:assets/css", "sass-prod": "sass --no-source-map --style=compressed assets/scss:assets/css" } |
"scripts": { "sass-dev": "sass --watch --update --style=expanded assets/scss:assets/css", "sass-prod": "sass --no-source-map --style=compressed assets/scss:assets/css" }
- Подскажите, пожалуйста, как с этим быть?)
- martin_khachaturyan, npm run sass-dev
- martin_khachaturyan, https://sprucecss.com/blog/the-simplest-sass-compi...
- Владимир, Спасибо
Ответы:
это работа не для шторма. для этого есть свои инструменты. webpack, gulp и пр.
- Спасибо, поинтересуюсь, но пока не слишком много времени этим заниматься
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Для того чтобы настроить FileWatcher в WebStorm для компиляции CSS из SASS в нужную папку, следуйте этим шагам:
1. Откройте WebStorm и перейдите в меню "File" -> "Settings" (или используйте комбинацию клавиш Ctrl + Alt + S).
2. В открывшемся окне выберите раздел "Tools" -> "File Watchers".
3. Нажмите на кнопку "+" для добавления нового FileWatcher.
4. Выберите тип файла "SCSS" (или "SASS", в зависимости от того, какой формат вы используете).
5. В поле "File type" выберите "SCSS".
6. В поле "Scope" укажите, в каких папках или файлах должен работать FileWatcher.
7. В разделе "Program" укажите путь к установленному у вас компилятору SASS. Например, путь к установленному у вас Node.js и пакету SASS может выглядеть так: C:\Users\YourUsername\AppData\Roaming
Для того чтобы правильно задать путь в FileWatcher в WebStorm для компиляции CSS из SASS в нужную папку, вам потребуется следовать нескольким шагам.
1. Убедитесь, что у вас установлен SASS. Если нет, установите его с помощью npm:
```
npm install -g sass
```
2. Откройте ваш проект в WebStorm и перейдите в настройки FileWatcher. Для этого перейдите в File -> Settings -> Tools -> File Watchers.
3. Нажмите на плюсик (+) для создания нового FileWatcher и выберите тип файлов, которые вы хотите отслеживать (например, SCSS или SASS).
4. Введите имя для вашего FileWatcher, например "SASS to CSS".
5. В поле "File type" выберите тип файлов, которые вы хотите компилировать (например, SCSS).
6. В поле "Scope" выберите директорию, в которой хранятся ваши исходные файлы SASS.
7. В поле "Program" введите путь к исполняемому файлу SASS. Обычно это будет что-то вроде:
```
/usr/local/bin/sass
```
или
```
C:\Ruby27-x64\bin\sass
```
8. В поле "Arguments" введите аргументы командной строки для компиляции SASS в CSS. Например:
```
--no-source-map $FileName$:$FileNameWithoutExtension$.css
```
9. В поле "Output paths to refresh" укажите путь к папке, в которую вы хотите сохранять скомпилированные CSS файлы. Например:
```
$FileDir$/css/$FileNameWithoutExtension$.css
```
10. Нажмите "OK", чтобы сохранить настройки FileWatcher.
Теперь, когда вы сохраните файлы SASS в вашей директории, FileWatcher автоматически скомпилирует их в CSS и сохранит в указанной вами папке. Таким образом, вы можете легко и быстро компилировать ваши SASS файлы в CSS прямо из WebStorm.