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

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

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

这是我尝试过的脚本，它似乎只找到“static”目录，并在

output/styles

中将它们作为单个css文件输出。文档化的node sass命令的解释非常简单

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

---

我假设这不是一个React项目。如果它是反应比有一个真正的好文章在这里，它是相对直接的fwd

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

创建并索引.html文件

创建css文件夹和scss/sass文件夹

在css文件夹中创建一个style.css文件

将节点sass安装为开发人员依赖项

在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，这将被覆盖

---

您以前是否使用过Gulp或Webpack之类的工具将文件捆绑/打包在一起？@CallistusAsirvatham目前只尝试使用package.json文件脚本来实现这一点。也许我找错树了？我建议你可以使用，如果你可以共享你的目录结构（不必是真名），那么也许可以帮助你建立一个script@CallistusAsirvatham/assets/src（静态内容），/components（它们自己目录中的组件），/assets/styles（输出目录）然后，你可以使用像gulp这样的东西，递归地搜索你的目录，然后选择你需要的文件。