如何让 npm 从 scss 创建一个 .min.css 文件？答案

【问题标题】：How can I get npm to create a .min.css file from scss?如何让 npm 从 scss 创建一个 .min.css 文件？
【发布时间】：2020-06-03 04:24:09
【问题描述】：

我使用 json 脚本从 scss 自动编译 css，但它从后缀中删除了“.min”。这是显示我正在运行的脚本和正在呈现的文件的终端输出：

PS C:\Projects\myproject> npm run globalscss

> myproject@1.0.0 globalscss C:\Projects\myproject
> node-sass -w scss/usn-global.scss -o css css/usn-global.min.css --output-style compressed

=> changed: C:\Projects\myproject\scss\usn-global.scss
Rendering Complete, saving .css file...
Wrote CSS to C:\Projects\myproject\css\usn-global.css

我希望看到脚本写入 C:\Projects\myproject\css\usn-global.min.css

但脚本正在写入 C:\Projects\myproject\css\usn-global.css

双后缀有问题吗？

【问题讨论】：

标签： css npm sass npm-scripts

【解决方案1】：

只要您使用-o, --output 标志，node-sass 将始终将输入文件编译到具有相同文件名的给定输出目录。

如果您省略输出标志并将输出通过管道传输到文件夹，则可以定位您想要的后缀文件名。

例子：

node-sass --output-style compressed scss/usn-global.scss > css/usn-global.min.css

只要css 文件夹存在，这将起作用。

但是，根据this issue 似乎无法将此命令与-w, --watch 标志结合使用。不过有renaming files with npm scripts 的选项。

如果您在观察者完好无损的情况下坚持当前的工作流程，您可以将另一个 npm 脚本添加到您的 package.json 文件中，可能是这样的：

"scripts": {
    "rename": "node -e \"require('fs').rename('css/usn-global.css', 'css/usn-global.min.css', function(err) { if (err) console.log(err); console.log('CSS file renamed with .min suffix!') })\""
}

...意思是当你完成 CSS-ing 后，你需要运行 npm run rename 来获取正确的文件名。

【讨论】：