Как заставить мои CSS-модули работать в моем приложении Express - PullRequest
Новая
       10

Как заставить мои CSS-модули работать в моем приложении Express

1 голос
/ 29 апреля 2019

Я уже довольно давно использую CSS для одного файла с моим текущим проектом, но им стало очень долго и сложнее управлять.Итак, теперь я собираюсь поместить свой CSS в модули, чтобы упростить редактирование.Я никогда не делал этого в приложении Express, только в Wordpress.Я пытался использовать postcss, как и в Wordpress, но, похоже, он вообще не работает, и я не совсем понимаю документы 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

1 Ответ

1 голос
/ 30 апреля 2019

Все, что вам не хватает в вашем 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. Я использовал sync версию, чтобы быть в sync с кодом, который вы опубликовали.

...