Node JS:通过Node JS脚本将.scss文件编译为.css和.map.css

Question

我是node js的新手，它的结构等等

我正在尝试使用node js脚本将.scss文件编译为.css和.map.css文件。脚本sass-dev.js在我的package.json中定义:

"scripts": {
"sass-dev": "node ./scripts/sass-dev.js"
},

所以我可以通过npm run sass-dev运行脚本。脚本本身工作正常，因此它将utility.scss编译为utility.css。但是我还想创建一个源映射utility.map.css。因此，我在选项中定义了sourceMap: true，但没有创建额外的文件。

那么，我如何编译.css和.map.css文件从我的.scss?

sass-dev.js:

const fs = require('fs');
const path = require('path');
const sass = require('sass');
const sassFile = path.join(__dirname, '../sass/utility.scss').toString();
const cssFile = path.join(__dirname, '../css/utility.css').toString();
const mapFile = path.join(__dirname, '../css/utility.map.scss').toString();
sass.render(
{
file: sassFile,
sourceMap: true,
outFile: mapFile,
},
(error, result) => {
if (!error) {
fs.writeFileSync(cssFile, result.css, function (err) {
if (err) console.log(`Error appeared while writing file "${o}".`);
});
} else {
console.log(error.formatted);
console.log(`Error appeared in "${error.file}" !nline: ${error.line}, column: ${error.column}n${error.status}`);
}
}
);

Answer 1

在node-scss中，设置文件路径不会自动将输出写入文件(CSS和映射)，它只是用于引用，您必须将输出写入文件，就像您对CSS所做的那样。

另外，outFile应该是生成的CSS文件的路径。如果将sourceMap设置为true，则将自动确定映射文件(通过附加.map)。否则，您可以将sourceMap直接设置为字符串来使用它。

最后，由于您使用的是writeFileSync，因此您不必传递回调函数，只需将其封装在try catch中即可。

sass.render({
file: sassFile,
outFile: cssFile,
}, (err, result) => {
if (err) {
// Handle error
return;
}
try {
fs.writeFileSync(cssFile, result.css);
fs.writeFileSync(mapFile, result.map);
} catch (e) {
// Handle error
}
});