css - 让我的 CSS 模块在我的 Express 应用程序上工作
问题描述
在我当前的项目中,我在一个文件上使用 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)
}
});
您可以async
使用fs.writeFileSync
. 我使用同步版本与您发布的代码同步。
推荐阅读
- c# - 动态检索存储过程的结果
- python - Python 和 Selenium - 使用 XPath text() 而不是 myElement.text?
- c# - VSTO 加载项:清单中的引用与下载的程序集的标识不匹配
- r - 按组用平均值估算缺失数据
- bash - 使用 source 命令时终端找不到 bashrc 文件
- security - BigCommerce 托管的 IP 地址范围?
- bash - Sbt 外部进程无法处理“eval”命令
- nativescript - nativescript 应用程序在 android 设备上导航时运行缓慢并死机,但在 ios 上运行良好
- php - MYSQL db中的PHP执行语句真的很慢
- python - 我怎样才能等到所有芹菜任务完成后再继续我的代码