node.js - node-sass-middleware 没有做任何事情

Question

我正在尝试使用node-sass-middleware，但它没有创建.css我的.scss文件。

我的文件结构（简化）是

- node-modules
- public
     |- common
     |     |-sass
     |     |     |-style.scss
     |     |-css
- server.js

并且里面的代码server.js有

var cssLoc =  __dirname + "\\public\\common\\css";
var cssDest =  __dirname + "\\public\\common";
console.log(cssLoc);
console.log(cssDest);
app.use(sass({
    src: cssLoc,
    dest: cssDest,
    debug: true,
    outputStyle: 'compressed'
}));

app.use(express.static(__dirname + '/public'));

我不知道为什么这不起作用。这是非常令人沮丧的。

Answer 1

它不起作用的很可能的原因是因为令人困惑的是node-sass-middleware将采用其src和dest属性中指定的路径，然后查看html中的本地css文件引用标签，获取它们引用的路径，并在指定的src和dest路径中查找那些确切的路径。

示例（在您的 app.js 文件中）：

var nodeSassMiddleware = require('node-sass-middleware');

app.use(nodeSassMiddleware({
   src: path.join(__dirname, 'assets'),
   dest: path.join(__dirname, 'public')
});

然后在您的基本 html 文件中包含一个链接标记，如下所示：

<link rel="stylesheet" type="text/css" href="/immediate/style.css"

node-sass-middleware将查找/assets/immediate/style.scss并将该文件输出到/public/immediate/style.css

一旦你意识到发生了什么，这实际上非常棒:)，在你的控制台中启动你的服务器并访问浏览器中的链接，你的控制台将记录正在使用的实际源和目标路径。

想办法把我的头撞在墙上一段时间，希望它有帮助！

Answer 2

使用具有以下目录结构的原始示例：

- node-modules
- public
     |- common
     |     |-sass
     |     |     |-style.scss
     |     |-css
- server.js

在server.js您调用的node-sass-middleware地方，看起来您的src和dest属性设置不正确。例如，

var cssLoc =  __dirname + "\\public\\common\\css";

用于填充src属性的应该是您的 *.scss 文件的路径，而是指向您的 CSS 目标目录。同样，该dest物业，

var cssDest =  __dirname + "\\public\\common";

不是指向 CSS 目录而是它的父目录。

在sass-node-middleware您设置的块中debug: true，您应该能够查看启动应用程序的控制台中使用的路径，以验证它们是否正确：

app.use(sass({
    src: cssLoc,
    dest: cssDest,
    debug: true,
    outputStyle: 'compressed'
}));

这可以重构为：

app.use(sass({
    src: path.join(__dirname, 'public', 'common', 'sass'),
    dest: path.join(__dirname, 'public', 'common', 'css'),
    debug: true,
    outputStyle: 'compressed'
}));

那应该将您的 SASS 编译成 CSS，但正如 SirRodge 之前的回答所提到的，您仍然有解决getCSS 请求的路径。如果您使用的是 express.static 内置中间件，app.use(express.static(path.join(__dirname, 'public')));要从一个名为的目录中提供文件，public并且在您的 HTML 中您正在引用 CSS，/common/css/style.css那么您需要将prefix属性添加到中间件：

app.use(sass({
    src: path.join(__dirname, 'public', 'common', 'sass'),
    dest: path.join(__dirname, 'public', 'common', 'css'),
    debug: true,
    outputStyle: 'compressed',
    prefix: '/common/css'
}));