如何在我的 Express.js 应用程序中正确运行 node-sass 选项

编程问答 2022-05-24

问题描述

我的自定义 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 的 Options 之后，我想我可以像这样简单地将这些选项放在我的 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/ 中的所有内容），我遗漏了什么或没有正确做些什么？

解决方法

我意识到我在 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
        }
    });
});

希望这对那里的人有所帮助。

expressexpressexpressnode-sass