Как правильно запускать параметры node-sass в моем приложении Express.js

У меня есть следующая настройка в моем пользовательском приложении Express.

  • Я установил node-sass в качестве зависимости, и он виден из моего файла package.json следующим образом:
"dependencies": {
  "express": "^4.17.1",
  "node-sass": "^5.0.0",
  "nodemon": "^2.0.7",
  "npm-run-all": "^4.1.5",
  "twig": "^1.15.4"
}
  • Я запускаю npm run watch, чтобы все заработало. Он отлично работает:
"scripts": {
  "watch-sass": "node-sass -w src/scss/ -o pub/css/",
  "watch-code": "nodemon --ext js,twig server.js",
  "watch": "npm-run-all --parallel watch-code watch-sass"
},

После прочтения некоторых параметров, которые мы можем использовать для node-sass из официального источника, Я подумал, что могу просто поместить эти параметры в свой файл server.js, перезагрузить сервер и увидеть изменения, примененные к моему выходному файлу (например, pub/css/css_bundle.css).

   const result = sass.renderSync({
     outputStyle: 'compressed', //compressed | nested | expanded | compact
     sourceMap: true, // or an absolute or relative (to outFile) path
   });

... Но что бы ни случилось (например, запуск моей команды npm run watch), мой выходной файл не сжимается.

Я новичок в этом процессе управления параметрами конфигурации sass. Что я упускаю или делаю неправильно, чтобы управлять параметрами node-sass и подключать их к моей настройке (т.е. все внутри pub/css/)?


express node-sass
person klewis    schedule 20.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я пришел к выводу, что у меня есть хорошая гибкость при настройке параметров как в моем файле package.json (при разработке клиентской части), так и в моем файле server.js (при перезапуске сервера). В моем случае я могу использовать одни и те же параметры в обеих областях. Следующие ресурсы привели меня к такому образу мышления на данный момент.

Что касается того, чтобы мои параметры работали со стороны сервера, мне помогла следующая корректировка моего кода!


const mscss = path.resolve(__dirname, 'src/scss/', 'css_bundle.scss');
const mcss = path.resolve(__dirname, 'pub/css/', 'css_bundle.css');

sass.renderSync({
    file: mscss,
    outputStyle: 'compact', //compressed | nested | expanded | compact
    outFile: mcss,
    sourceMap: true, // or an absolute or relative (to outFile) path
}, function (err, result) {
    /*...*/
    if (err) throw err;
    console.log('scss render completed');

    fs.writeFile(mcss, result.css, function (err) {
        if (!err) {
            //file written on disk
        }
    });
});

Надеюсь, это поможет кому-то там.

person klewis    schedule 20.02.2021