css - NPM 多个目录下的多个SCSS文件合并成一个css文件

Question

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

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

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

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

Answer 1

我假设这不是针对 React 元素的。如果它是针对 React 的，那么这里有一篇非常好的文章，而且它相对直接。 https://scotch.io/tutorials/using-sass-in-create-react-app-v2

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

1. 创建和 index.html 文件
2. 创建一个css文件夹和scss/sass文件夹
3. 在 css 文件夹中创建一个 style.css 文件
4. 安装 node-sass 作为开发依赖

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

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

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