使用 Node-sass 缩小 CSS

Posted 2023-02-21

【中文标题】使用 Node-sass 缩小 CSS

【英文标题】：Minify CSS with Node-sass

【发布时间】：2017-03-27 12:49:51

【问题描述】：

我在我的 NodeJS 项目中使用 SCSS，并让我的脚本使用以下命令将我所有单独的 SCSS 文件转换为单个 CSS 文件

node-sass -w public/css/scss/style.scss public/css/style.css

我唯一的问题是我还希望缩小 CSS 文件。这可能与 Node-sass 吗？文档说有一个“紧凑”选项，但是当我尝试时它似乎不起作用

node-sass -w compact public/css/scss/style.scss public/css/style.css

提前感谢您的帮助。

【参考方案1】：

由于 LibSass 和 Node Sass are deprecated使用 Dart-SASS 包：npm install --save-dev sass

_package.json

  "scripts": 
    "scss": "sass --style=compressed --watch src/scss:public/css"
  ,
  "devDependencies": 
    "sass": "^1.32.7"
  

要运行它并查看文件更改，请在终端中运行：

npm run scss 

给定一个文件夹结构，如：

_{?︎ package.json?︎ public?︎ css?︎ style.css ← 缩小和压缩?︎ src?︎ scss?︎ style.scss}

【参考方案2】：

"scss": "node-sass --watch scss -o app/css"这对我有用

【讨论】：

虽然可以编译，但不幸的是它不会“缩小”。为此，您将需要使用 --output-style compressed 标志

【参考方案3】：

node-sass 支持使用 --output-style 参数输出缩小的 CSS。

输出样式

类型：字符串 默认：nested 值：nested、expanded、compact、compressed

安装 node-sass npm 包后。我在 package.json 文件中添加了 build-css 行。

  "scripts": 
    "build-css": "node-sass --include-path scss scss/main.scss   public/css/main.css --output-style compressed",
  ,

然后我只需键入 npm run build-css 即可将 /scss/main.scss 文件中的内容转换为 /public/css/main.min.css 中的压缩（缩小）css

更多信息可以在 node-sass Github repo 的文档中找到https://github.com/sass/node-sass#outputstyle

【参考方案4】：

在node-sass documentation中说你要使用 --output-style，也可以是nested | expanded | compact | compressed。缩小使用compressed

例如：

node-sass -w public/css/scss/style.scss public/css/style.css --output-style compressed

将缩小 CSS。

【讨论】：

node-sass 现已弃用。尽管这在 2016 年是正确的，但还是建议使用 Roko C. Buljan 回答的 Dart-SASS 包。

@dasper 不确定 node-sass 是否也被弃用，也许它很快就会使用 Dart Sass？

@Timo in github.com/sass/node-sass 明确将此警告放在首位：警告：LibSass 和 Node Sass 已弃用。虽然他们将继续无限期地接收维护版本，但没有计划添加额外的功能或与任何新的 CSS 或 Sass 功能兼容。仍在使用它的项目应该转移到 Dart Sass。