让我的 CSS 模块在我的 Express 应用程序上工作答案

【问题标题】：Getting my CSS modules to work on my Express app让我的 CSS 模块在我的 Express 应用程序上工作
【发布时间】：2019-09-18 07:22:07
【问题描述】：

在我当前的项目中，我在一个文件上使用 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

【问题讨论】：

那么到底是什么问题？
我的 CSS 文件/文件无法正常工作，我不知道为什么。当它是一个包含我所有 CSS 的单个文件时，一切正常，但一旦我使用 @import，它就不再工作了。
你在这里得到正确的输出console.log(output)？
我愿意。我在终端中得到了看起来像我所有的 CSS。

标签： css express ejs

【解决方案1】：

您在postcss 中缺少的只是没有写入 输出到您的目的地。按照文档操作很简单。

请注意，您应该以不同的方式命名您的 input css 和 output 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。

【讨论】：