9

我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在根中添加一个，将所有不相关的部分聚集在一起，然后将其分解？

4

5 回答 5

7

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

于 2015-08-27T16:04:48.517 回答
4

例如，如果您想编译*.scss文件夹中的每个文件src/assets/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/",
...
于 2020-04-21T20:38:54.777 回答
1

这完美地工作

node-sass <input1.scss> [output1.css] && node-sass <input2.scss> [output2.css]
于 2019-01-07T12:26:43.930 回答
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"

},

于 2020-11-29T16:57:35.243 回答
0

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

node-sass [options] styles/ [output.css]
于 2018-02-03T00:37:49.470 回答