我怎样才能让 npm 从 scss 创建一个 .min.css 文件？

Question

我使用 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

双后缀有问题吗？

Answer 1

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

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

示例：

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

只要 css 文件夹存在，这就有效。

不过好像this issue that it's not possible to combine this command with the -w, --watch flag. There are options to 不过。

如果您坚持当前的工作流程并且观察器完好无损，您可以将另一个 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 才能获得正确的文件名。

我怎样才能让 npm 从 scss 创建一个 .min.css 文件？

How can I get npm to create a .min.css file from scss?

css

npm

sass

npm-scripts