У меня установлен node-sass, и я установил параметры, как показано в нижнем ответе на Использование опции просмотра узла-sass с npm run-script , однако, мне кажется, что это просто не работает .
Это мой package.json файл с моей последней попыткой:
{
"name": "linkup-paints",
"description": "NPM for Linkup Paint Supplies website for 2019",
"version": "1.0.2",
"main": "index.js",
"scripts": {
"start": "run-script-os",
"start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*, !styles/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"
},
"author": "dpDesignz",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.3",
"run-script-os": "^1.0.3",
"node-sass": "^4.9.4"
}
}
Итак, я попробовал:
"build:sass": "node-sass -r --output-style compressed styles/main.scss -o css/main.css",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"
и
"css": "node-sass styles/main.scss -o css/main.css",
"css:watch": "npm run css && node-sass styles/main.scss -wo css/main.css"
и
"scss": "node-sass --watch styles/main.scss -o css/main.css"
и (в соответствии с предложением sidthesloth):
"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"
Я запускаю npm i, и как только это завершится, я запускаю npm start. Запускается браузерная синхронизация и наблюдает за изменениями файла, но мой css/main.css не компилируется и не обновляется при изменении файла .scss.
Я только начал / изучил, как использовать NPM, поэтому любая помощь будет высоко ценится. Я изучил руководства и ответы (включая Использование node-sass , Просмотр и компиляция Sass за пять быстрых шагов и Использование node-sass для компиляции файлов Sass в скрипт npm ) за последние 2 часа безуспешно.
Кто-нибудь сможет указать мне правильное направление, чтобы мои watch и build заработали, пожалуйста?
UPDATE:
Так что просто обновление для тех, кто ищет это в будущем, я не понимал, как работают скрипты, и не понимал, что мои скрипты не запускались параллельно друг другу. Я думал, что npm start запустил все мои скрипты для запуска, я не понимал, что вы должны вызывать их все. Мой окончательный файл package.json выглядит следующим образом:
{
"name": "linkup-paints",
"version": "1.0.3",
"description": "NPM for Linkup Paint Supplies website for 2019",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"start": "npm-run-all --parallel browser-sync build-sass watch-sass",
"browser-sync": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' -w --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"
},
"keywords": [
"linkup",
"2019"
],
"repository": {},
"author": "dpDesignz",
"license": "ISC",
"devDependencies": {
"npm-run-all": "^4.1.3",
"browser-sync": "^2.26.3",
"node-sass": "^4.9.4"
},
"bugs": {
"url": "http://support.dpdesignz.co"
},
"homepage": "http://www.dpdesignz.co"
}
В итоге я добавил скрипт npm-run-all и изменил мои start аргументы на npm-run-all --parallel browser-sync build-sass watch-sass, так как мне не нужна перекрестная совместимость со старыми run-script-os аргументами, которые у меня были ранее. Я также поместил аргумент -w (--watch) в строку синхронизации браузера, чтобы созданные файлы .css запускали синхронизацию, поскольку сборка фактически заменяет файл .css, а не "изменяет" его в соответствии с требованиями браузерная синхронизация по умолчанию.