如何使用 yarn 脚本编译 sass？答案

【问题标题】：How to compile sass using a yarn script?如何使用 yarn 脚本编译 sass？
【发布时间】：2022-11-17 07:55:42
【问题描述】：

我有以下项目：

package.json

yarn.lock

node_modules/

src/
   pages/
     home/
       home.html
       _home.scss

     about/
       about.html
       _about.scss
   
   index.html

   styles/
     global.scss

这是我第一次使用 sass，但我知道它需要编译成普通的 css...我的问题是：我是否必须一个一个地编译我所有的 sass 文件？

是否可以针对项目的所有 scss 文件运行 yarn 脚本？

package.json
-------------

"scripts": {
  "build-sass": "run something here",
}

请记住，我是 scss 技术的新手。

【问题讨论】：

这是一个更大的问题。你在使用包含吗？通常编译器的工作方式是编译目录中的所有 scss 文件不要有 _ 下划线前缀并将它们输出到单独的 CSS 文件。您可以使用通配符* 选择器来查看目录。或者，如果您使用的是 include，则只需编译父母.scss 文件。同样，yarn 应该将任何没有 _ 前缀的东西编译成单个 CSS 文件到您指定的目录。我会 watch this video 帮助您设置您的包文件。

标签： html css sass yarn-lock.json

【解决方案1】：

安装 node-sass yarn add node-sass -D

然后将其添加到您的脚本中

"scripts": {
  node-sass path/to/global.scss --output path/to/output-folder --output-style compressed
}

注意：如果要压缩输出，只添加--output-style compressed

【讨论】：