cannot import bootstrap when using the jsx view engine about express-react-views

[ardaorkin]

I solved the problem.
In my app.js file in the root folder of the project, I add this line to serve static CSS file with Express:
app.use(express.static("assets"));
This means Express will serve static file within the assets directory. Check it out for more info.
Then I copy /node_modules/bootstrap/dist/css/bootsrap.min.css file to /assets/css/ directory.
Finally in the jsx file which will be rendered, I add these line to require react-bootsrap module:
const Bootstrap = require("react-bootstrap");
And add the link tag in returned JSX:
<link rel="stylesheet" href="/css/bootstrap.min.css"></link>

So finally app.js file has been like that:

const express = require("express");
const app = express();
const path = require("path");
require("dotenv").config();

const about = require("./routes/about");
const works = require("./routes/works");
const port = process.env.PORT || 8000;

app.set("views", __dirname + "/views");
app.set("view engine", "jsx");
app.engine("jsx", require("express-react-views").createEngine());

app.use(express.static("assets"));

app.use("/works", works);

app.use("/about", about);

app.listen(port, () => {
  console.log(`Server listening on port: ${port}`);
});

And JSX file has been like that:

const React = require("react");
const Bootstrap = require("react-bootstrap");

const About = (params) => {
  return (
    <div>
      <link rel="stylesheet" href="/css/bootstrap.min.css"></link>
      <img src="/images/zebra.jpeg"></img>
      <Bootstrap.Button variant="primary">Primary</Bootstrap.Button>{" "}
    </div>
  );
};

module.exports = About;

[orar]

I tried doing same with tailwindcss and failed.
This ll be possible if there's a way to use postcss when bundling views to import the css.
But I dont know how yet.

[ardaorkin]

+1

[ForInterviews1988]

I Used webpack to compile bootstrap.css into a javascripted form (->bootstrap.js). this is how i got rid of the above problem under nodeJS