cannot import bootstrap when using the jsx view engine #159

Activity

1. orar commented on Dec 16, 2020

   

   orar

   on Dec 16, 2020

   Last edited by orar

   More actions

   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.
2. ardaorkin commented on Dec 23, 2020

   

   ardaorkin

   on Dec 23, 2020

   More actions

   +1
3. ForInterviews1988 commented on Dec 23, 2020

   

   ForInterviews1988

   on Dec 23, 2020

   More actions

   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
4. ardaorkin commented on Dec 23, 2020

   

   ardaorkin

   on Dec 23, 2020

   Last edited by ardaorkin

   More actions

   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;
   
   

   👍React with 👍1Reacted by Muragijimana