在我当前的元素中，我在一个文件上使用 CSS 已经有一段时间了，但它变得非常长且难以管理。所以现在我希望将我的 CSS 放入模块中，以使编辑更容易。我从来没有在 Express 应用程序上做过这个，只有 Wordpress。我试过像使用 Wordpress 一样使用 postcss，但它似乎根本不起作用，而且我并不真正理解 express 的 npm 文档。
任何帮助都会很可爱。
我的 app.js 文件
var express = require("express"),
app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var fs = require('fs');
var postcss = require('postcss');
var atImport = require('postcss-import');
//Post CSS congig
var css = fs.readFileSync("/Users/myname/Desktop/Lookalike/public/stylesheets/style.css", "utf8");
postcss()
.use(atImport())
.process(css, {
from: "public/stylesheets/style.css"
})
.then(function (result) {
var output = result.css
console.log(output)
})
//Mongoose config
mongoose.connect("mongodb://localhost:27017/lookalike", {
useNewUrlParser: true
});
//Body parser config
app.use(bodyParser.urlencoded({
extended: true
}));
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));
//Routes
var homeRoute = require("./routes/home");
//Require routes from other files
app.use("/", homeRoute);
app.listen(process.env.PORT || 3000, process.env.IP, function () {
console.log("Lookalike server has started");
});
我的头文件头
<!DOCTYPE html>
<html>
<head>
<title>Lookalike</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel ="stylesheet" href="/stylesheets/style.css">
</head>
我的 CSS 模块文件
@import "/modules/front-page";
@import "/modules/discography";
@import "/modules/follow";
@import "/modules/store";
@import "/base/baseline";
我的文件配置看起来像这样
/public
/images
/stylesheets
/base
/baseline.css
/modules
/fontpage.css
/discography.css
/follow.css
/store.css
最佳答案
您在postcss 中所缺少的只是没有将 输出写入您的目的地。按照文档操作很简单。
请注意，您应该以不同的方式命名您的输入 css 和 输出 css，或者将它们放在不同的文件夹中(首选)
postcss()
.use(atImport())
.process(css, {
from: "public/stylesheets/style.css"
})
.then(function (result) {
var output = result.css
console.log(output)
fs.writeFileSync("/Users/myname/Desktop/Lookalike/public/stylesheets/finalstyle.css", result.css) // <-- need a different name to differentiate input css and the output from postcss
if ( result.map ) {
fs.writeFileSync('/Users/myname/Desktop/Lookalike/public/stylesheets/finalstyle.css.map', result.map)
}
});
您可以使用 fs.writeFileSync 的 async 版本。我使用sync 版本与您发布的代码sync。
关于css - 让我的 CSS 模块在我的 Express 应用程序上运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55907239/