Sass filewatcher за webstorm

Определено пътят до .cmd е грешен, както предложиха lena и lazy one. Всеки път, когато наблюдателят премахне отметката в Web/Phpstorm, това вероятно се дължи на невалиден път. Ако все още имате проблеми с node-sass, винаги можете да отидете на Ruby.

1. Изтеглете и инсталирайте Ruby за Win,
2. Инсталирайте Sass чрез командния ред с gem install sass,
3. В Web/Phpstorm поставете "Program" път към sass.bat (помните ли node-sass.cmd?), напр. C:\Ruby200\bin\sass.bat

1. Трябва да посочите пълен път до node-sass.cmd в програмно поле (както @LazyOne спомена)
2. Посочените аргументи няма да работят с node-sass - те са подходящи само за стандартен SASS компилатор. Ето списък с опции за node-sass:

Usage: node C:\Users\USER\AppData\Roaming\npm\node_modules\node-sass\bin\node-sass

[опции] <input.scss> [<output.css>]

Options:
  --output-style     CSS output style (nested|expanded|compact|compressed)  [default: "nested"]
  --source-comments  Include debug info in output (none|normal|map)         [default: "none"]
  --include-path     Path to look for @import-ed files                      [default: "C:\\Users\\USER\\AppData\\Roaming\\npm"]
  --watch, -w        Watch a directory or file
  --output, -o       Output css file
  --stdout           Print the resulting CSS to stdout
  --help, --help     Print usage info

най-простата настройка изглежда по следния начин:

Program: C:\Users\USER\AppData\Roaming\npm\node-sass.cmd
Arguments: $FileName$ $FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileNameWithoutExtension$.css

'Create output from stdout' should be off

С такива настройки генерираният .css файл ще бъде поставен близо до оригиналния .scss. Ако искате да поставите получените файлове в друга папка, опитайте да играете с опцията -o. Като:

Arguments: $FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.css
Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css

Първо трябва да инсталирате nodejs и след това да използвате npm install -g node-sass. След това задайте следните неща за webstorm scss filewatcher:

• Програма: node-sass.cmd
• Аргументи: $FileName$ $FileNameWithoutExtension$.css
• Работна директория: $FileDir$
• Изходни пътища за справки: $FileNameWithoutExtension$.css

Отговорите тук бяха много полезни и много близки до това, от което имах нужда. Исках приложението да създаде картографските файлове и да ги обедини с css файловете. Ето настройките, които работеха при мен. Надявам се това да помогне на някой друг!

• Показване на конзолата: [Грешка]
• [x] Незабавно синхронизиране на файлове
• [x] Проследяване само на root файлове
• [ ] Наблюдател на задействания независимо от синтактични грешки
• Тип файл: Sass
• Обхват: Проектни файлове
• Програма: /usr/local/bin/node-sass
• Аргументи: --source-map true --indented-syntax --output-style компресиран $FileName$ $FileNameWithoutExtension$.css
• Работна директория: $FileDir$
• Променливи на средата:
• Изходни пътища за опресняване: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
• [] Създаване на изходен файл от stdout

Знам, че на този въпрос е отговорено, това е за бъдещ посетител,

Програмата за наблюдение на файлове Phpstorm не работи много добре с node-sass (тествано в Windows Phpstorm 8.0.1)

Вместо това инсталирайте node-sass-cli и използвайте следната настройка

Phpstorm 8.0.3 Windows 7(x64) node-sass инсталиран глобално работещ пример

Друг ключов проблем от оригиналната публикация, освен точката към .cmd, е замяната: с наклонена черта, възелът не разбира синтаксиса на двоеточие и очаква вместо нея наклонена черта за полето Аргументи. Намерен отговор от връзката по-долу

http://www.wonderlandlabs.com/blog/scss_in_webstorm

Забележете, че в горния пример за Windows трябва да посочите cmd файла, т.е. „път към глобалните npm пакети/node-sass.cmd“

Освен това той има превключватели за ruby ​​sass, като например --no-cache, които няма да работят с node, както lena посочи, node-sass превключвателите трябва да работят добре, но не са тествани

Ето една работеща конфигурация

node-sass не изисква нищо повече от $FileName$ $FileNameWithoutExtension$.css Тестван и работи в WebStorm 11

Програмният параметър обаче се нуждае от пълния път до bin/exe, дори когато е глобално достъпен. В моя случай /usr/local/bin/node-sass, във вашия случай това ще бъде пътят до node-sass.cmd.

използване на node sass cli

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

node sass cli параметри

-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files
-o, --output               Output directory
-x, --omit-source-map-url  Omit source map URL comment from output
-i, --indented-syntax      Treat data from stdin as sass code (versus scss)
-q, --quiet                Suppress log output except on error
-v, --version              Prints version info
--output-style             CSS output style (nested | expanded | compact | compressed)
--indent-type              Indent type for output CSS (space | tab)
--indent-width             Indent width; number of spaces or tabs (maximum value: 10)
--linefeed                 Linefeed style (cr | crlf | lf | lfcr)
--source-comments          Include debug info in output
--source-map               Emit source map
--source-map-contents      Embed include contents in map
--source-map-embed         Embed sourceMappingUrl as data URI
--source-map-root          Base path, will be emitted in source-map as is
--include-path             Path to look for imported files
--follow                   Follow symlinked directories
--precision                The amount of precision allowed in decimal numbers
--importer                 Path to .js file containing custom importer
--functions                Path to .js file containing custom functions
--help                     Print usage info

Имам същия проблем. Конфигурацията по подразбиране от IntelliJ не работи.

Този е работен. Можете да видите различната конфигурация, която е маркирана в жълто.

Инсталирах node-sass чрез npm (npm install node-sass), за да транскрибирам scss към css. Единственият проблем с конфигурацията, както във въпроса, беше разположението на файла node-sass.cmd. Когато инсталирате чрез npm, трябва да инсталирате файла .cmd в папката node_modules\.bin.

В моя случай, от мястото, където файлът node-sass беше (node_modules\node-sass\bin\node-sass) до (node_modules\.bin\node-sass.cmd).

Също така, според отговора на Лена, изходният аргумент трябва да бъде:

Аргументи: $FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.css

PHP storm версия 2018.02

Не успях да накарам filewatcher да генерира css.map файл с публикацията на Günay, цялата останала публикация работи добре за мен, така че това, което използвам:

Инсталация

Инсталирайте node-sass глобално: npm install -g node-sass

Настройки:

1. Програма C:\Users\User\AppData\Roaming\npm\node-sass.cmd

2. Аргументи --source-map true $FileName$ $FileNameWithoutExtension$.css

3. Изходен път за опресняване $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

4. Работна директория $FileDir$

Надявам се това да помогне