NPM 将多个目录中的多个 SCSS 文件合并到一个 css 文件中答案

【问题标题】：NPM many SCSS files in many directories into one css fileNPM 将多个目录中的多个 SCSS 文件合并到一个 css 文件中
【发布时间】：2023-10-15 23:57:01
【问题描述】：

我有一个包含 SCSS 文件的“静态”目录。我的应用程序组件位于另一个目录中，每个目录都有一个 SCSS 文件。

我想将所有这些文件编译成一个输出目录中的 .css 文件。 “静态” SCSS 文件之一是一个变量文件，应该导入到所有其他文件中。我还希望不必维护每个组件中的导入路径，以后可能会添加更多。

这是我尝试过的脚本，它似乎只能找到“静态”目录并将它们作为单独的 css 文件输出到 output/styles 中。记录在案的 node-sass 命令的解释非常简单。

"scss": "node-sass --watch ./my/static/styles ./my/components -o ./output/styles --output-style compressed"

【问题讨论】：

您之前是否使用过 Gulp 或 Webpack 之类的工具将文件捆绑/打包在一起？
@CallistusAsirvatham 到目前为止，只是尝试使用 package.json 文件脚本来执行此操作。也许我在这里叫错了树？
我建议您可以使用npmjs.com/package/scss-bundle，如果您可以共享您的目录结构（不必是真实姓名），那么也许可以帮助您构建脚本
@CallistusAsirvatham /assets/src（静态的东西），/components（自己目录中的组件），/assets/styles（输出目录）
你可能需要使用 gulp 之类的东西，递归搜索你的目录，然后找到你需要的文件。

【解决方案1】：

我将假设这不适用于 React 项目。如果它是针对 React 的，那么这里有一篇非常好的文章，而且它是相对直截了当的。 https://scotch.io/tutorials/using-sass-in-create-react-app-v2

假设在 vanilla javascript 中有一个空白项目，这是我在运行 npm init 之后所做的。

在 package.json 文件中编写如下脚本：

    "scripts": {"compile:sass": "node-sass sass/main.scss css/style.css -w"}

使用 npm run compile:sass 在终端内运行脚本
如果你还没有安装 live server，npm i live-server -g
您可以导入所有的 scss 文件，即。 _header.scss _nav.scss, _variables.scss 合并到上面创建的一个 main.scss 文件中。
在编译之前，您可能还需要一个非空的 style.css 文件。一旦你运行 npm run compile:sass，这将被覆盖

【讨论】：