具有多个输入文件的 Node-sass答案

【问题标题】：Node-sass with multiple input files具有多个输入文件的 Node-sass
【发布时间】：2015-08-04 19:17:32
【问题描述】：

我直接从命令行使用node-sass（实际上是一个 Makefile）来构建我的 CSS。

scss 文件位于不同的目录中，它们不相互引用。我想要的是将这些文件 sassify 到单个 CSS 输出，我可以从 HTML 中读取该输出 - 使用有效的源映射。

这是我在 Makefile 中的当前命令：

$(OUT_MAIN_CSS): $(SCSS) Makefile $(node-sass)
    cat $(SCSS) > $(TMP_SCSS)
    $(node-sass) --output-style compressed --source-map $(OUT_MAIN_CSS).map $(TMP_SCSS) $@
    rm $(TMP_SCSS)

OUT_MAIN_CSS 是 out/bundle.css。 SCSS 是输入文件的列表。 node-sass 是 node_modules/.bin/node-sass。

我想要一个单行且不需要临时文件。另外，我希望我的源映射引用（用于调试）指向原始文件，而不是临时文件。

node-sass 语法 1

node-sass [options] <input.scss> [output.css]

在这里，node-sass 坚持只有一个输入文件。如果我有两个或更多，第二个将被视为输出，并覆盖其内容。

“输入目录”和“输出目录”有一些选项，但我不想通过这种相当随意的限制来限制我的构建过程（是的，最终我会弯曲......）。

node-sass 语法 2

cat <input.scss> | node-sass [options] > output.css

这更符合 Unix 的心态。问题是双重的。我的输出文件位于子目录 (out/bundle.css) 中，这会混淆源映射引用，因为 node-sass 不知道输出路径。

似乎有--source-map-root，但我没有让它工作......

我很明显在这里的圆孔中放置了一个方形螺栓，不是吗？你会怎么做呢？

最好的方法是在根目录中简单地添加一个ring.scss，将所有不相关的部分聚集在一起，然后将其sassify 吗？

【问题讨论】：

我解决它的方法：实际上在scss文件之间引入依赖关系（它们是组件，有些属于更大的）。这样，主（应用程序）scss 文件只需导入几个最顶层的文件就足够了。源映射是正确的，以这种方式。我是一致的。

标签： sass npm node-sass

【解决方案1】：

node-sass <input1.scss> [output1.css] && node-sass <input2.scss> [output2.css]

 "scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css && node-sass sass/mobile.scss css/mobile.css"

},

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。一个适当的解释将通过展示为什么这是解决问题的好方法来极大地提高其长期价值，并使其对有其他类似问题的未来读者更有用。请编辑您的答案以添加一些解释，包括您所做的假设。

【解决方案2】：

例如，如果您想编译文件夹 src/assets/scss 中的每个 *.scss 文件并将生成的 *.css 文件输出到文件夹 dist 中，您可以将脚本添加到您的 package.json 文件中：

{
  "scripts": {
    "build:css": "node-sass -o dist src/assets/scss/",
...

并从命令行运行编译过程：

npm run build:css

如果要递归编译，请在命令中添加--recursive标志：

{
  "scripts": {
    "build:css": "node-sass --recursive -o dist src/assets/scss/",
...

【讨论】：

【解决方案3】：

这很好用

node-sass <input1.scss> [output1.css] && node-sass <input2.scss> [output2.css]

【讨论】：

【解决方案4】：

出于性能原因，我不得不使用单独的 index.scss。所以我使用了一个文件夹而不是单个文件，它可以工作。例如：

node-sass [options] styles/ [output.css]

【讨论】：

这不起作用，来自文档 - The input can be either a single .scss or .sass, or a directory. If the input is a directory the --output flag must also be supplied.

【解决方案5】：

为什么不创建一个 main Sass 文件，将所有文件导入其中，然后使用 node-sass 编译 main 文件？这应该会生成具有正确源映射的单个文件。

【讨论】：

可能是要走的路。我正在尝试使用 Sass，试图将传统的 Unix 构建工具和 JavaScript 构建工具连接在一起。有趣的是，这两个人的感觉有多么不同。
是的，Sass 原本也是一个 Ruby 工具，所以你会遇到各种奇怪的事情:)。
我不能这样做，因为我需要为不同的页面使用不同的 css，但是有些文件我不想编译，因为它们自己不做任何事情
更新：它自动知道不编译以_ 开头的文件，因此只需将根样式目录指定为输入即可满足我的需要
另一个用例可能是组件库，并且需要将每个样式巧妙地编译成css/components/my-button/module.css 类型结构。