Question

我对sass有点新意，但我正在开始一个新项目并想出为什么不潜入并学习我去！所以我的问题是......

我有一个如下所示的目录结构：

/sass
-->bootstrap
-->theme
-->_bootstrap.scss
-->_theme.scss

我希望能够设置npm-sass来监视整个目录（包括bootstrap）的更改，并将sass编译成位于以下位置的单个文件：

/css/theme.min.css

我知道-w sets手表，而--output-style compressed完成了缩小工作，但我如何设置它来观看目录并只编译一个文件？

希望我能够很好地提出这个问题：）

Answer 1

我正在从js文件启动 node-sass 。我的文件名为 actions.js ，在编辑任何scss文件之前，我在根文件夹中打开一个控制台并运行：

node actions.js

actions.js 的内容下方：

const fs = require('fs');
const spawn = require('child_process').spawnSync;

const watchFolder = './assets/scss';
const mainFile = 'assets/scss/main.scss';
const outFolder = 'assets/css';

console.log(`Watching for file changes on ${watchFolder}`);

fs.watch(watchFolder, (event, filename) => {
  if (filename) {
        console.log(`${filename} file Changed`);
        spawn('cmd.exe', [`/c node-sass ${mainFile} -o ${outFolder}`]);
   }
});

Answer 2

您必须导入文件，Sass不支持目录编译，因为导入顺序很重要。

@import "_bootstrap.scss";
@import "_theme.scss";

您希望自己的自定义主题覆盖引导样式。您还可以导入包含导入的文件。

node-sass监视并编译为单个文件

2 个答案: