使用 Node-sass 缩小 CSS

Question

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

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

我唯一的问题是我还想缩小 CSS 文件。这对 Node-sass 可行吗？文档说 'compact' 有一个选项，但当我尝试

时它似乎不起作用

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

提前感谢您的帮助。

Answer 1

在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。

Answer 2

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

outputStyle

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

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

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

的节点 sass Github 存储库文档中找到更多信息

Answer 3

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

Answer 4

因为 LibSass 和节点 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}

Minify CSS with Node-sass