文章/答案/技术大牛

发布

社区首页 >问答首页 >让我的CSS模块在我的Express应用程序上工作

问让我的CSS模块在我的Express应用程序上工作
EN

Stack Overflow用户

提问于 2019-04-29 16:17:52

回答 1查看 53关注 0票数 1

我在一个文件上使用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

express

ejs

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-30 15:22:37

您在postcss中所缺少的不是将输出写入目的地。遵循这些文档很简单。

注意，您应该将输入的css命名为不同的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。我使用同步版本与您发布的代码同步。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55907239

复制

相似问题

问让我的CSS模块在我的Express应用程序上工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让我的CSS模块在我的Express应用程序上工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让我的CSS模块在我的Express应用程序上工作
EN