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

Question

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

我的文件结构（简体）是

- 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

非常有可能的原因是它不工作是因为容易混淆的节点萨斯中间件将其SRC和DEST属性所指定的路径，然后看看当地CSS文件引用您的html标签，抓住它们参考的路径，然后在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"

节点萨斯中间件将查找/assets/immediate/style.scss并将该文件输出到/public/immediate/style.css

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

把我的头撞到墙上一会儿，弄清楚这一点，希望它有帮助！

Answer 2

使用具有以下目录结构最初的例子：

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

在server.js，你在呼唤它看起来像你必须设置src和dest性质不当node-sass-middleware。例如，

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前面的答复中提到你仍然有解决的CSS的的get请求路径。如果您使用的是express.static内置中间件，app.use(express.static(path.join(__dirname, 'public')));从一个名为public目录服务文件，并在你的HTML你引用的发言权/common/css/style.css，那么你需要的prefix属性添加到中间件的CSS：

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