Question

我真的很难理解node-sass-middleware。我已根据doc要求并调用它。但是，sass文件未编译，也没有任何记录到我的控制台。

const sassMiddleware = require('node-sass-middleware');
const bodyParser = require('body-parser');

app.use(
  bodyParser.json(),
  bodyParser.urlencoded({extended: false}),

  sassMiddleware({
    src: __dirname + '/style/sass',
    dest: __dirname + '/style',
    debug: true,
    indentedSyntax: true,
    outputStyle: 'compressed'
  }),

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

我已经向this和this寻求解决方案，以及上面提到的文档，但我尝试过的任何内容都没有给我想要的结果，包括将sass文件更改为scss

如图所示的依赖关系：

  "dependencies": {
  "body-parser": "^1.18.2",
  "express": "^4.16.2",
  "firebase-admin": "^5.8.2",
  "morgan": "^1.9.0",
  "node-sass-middleware": "^0.11.0",
  "pug": "^2.0.0-rc.4"
},

此外，链接到显然不存在的样式表不会返回404.这很奇怪？

Answer 1

您必须检查如何在“ /public/your.html”中链接样式表，确保您引用的样式表是：无前缀，然后重新加载浏览器并再次检查。

Answer 2

参考我的代码

const express = require("express");
const app = express();
const expressLayouts = require("express-ejs-layouts");
const port = process.env.PORT || "3000";
var sassMiddleware = require("node-sass-middleware");

// Setup SASS directories
var path = require("path");
var srcPath = __dirname + "/sass";
var destPath = __dirname + "/public/stylesheets";
app.use(
  sassMiddleware({
    src: path.join(__dirname, "sass"),
    dest: path.join(__dirname, "public/css"),
    debug: true,
    outputStyle: "compressed",
    prefix: "/css",
  }),
  // set default folder for importing css,jsand images
  express.static(path.join(__dirname, "public"))
);

app.use(expressLayouts);
app.set("view engine", "ejs");

//routes
app.get("/", function (req, res) {
  res.render("home", { title: "Home" });
});
app.get("/contact", function (req, res) {
  res.render("contact", { title: "Contact" });
});

app.listen(port, function () {
  console.log("server is listening at port", port);
});

参考我的 git 仓库 https://github.com/rockytechtips/node-ejs-boilerplate

node-sass-middleware不编译sass文件

2 个答案: