Question

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

scss文件位于不同的目录中，并且它们不相互引用。我想要的是将这些文件分类为单个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，将所有不相关的部分收集在一起，然后对此进行分类？

Answer 1

为什么不创建单个main Sass文件，将所有文件导入其中，并使用node-sass编译main文件？这应该会产生一个包含正确源代码的文件。

Answer 2

例如，如果要编译文件夹*.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/",
...

Answer 3

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

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

Answer 4

这很好用

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

Answer 5

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"

}，

包含多个输入文件的Node-sass

node-sass语法1

node-sass语法2

5 个答案: