cannot import bootstrap when using the jsx view engine

[SS88]

My app.js is as follows :

var express = require('express')
var app = express()
const hostname = '127.0.0.1';
const port = 3000;
const path = require('path');
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());
app.get('/ui', function (req, res) {
  res.render(path.join(__dirname, 'views/ui'));
});
app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

and my ui.jsx starts as follows : 

import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';

 import 'bootstrap/dist/css/bootstrap.min.css; 

 class Register extends Component {

  render() {
   
      return (
     
      <div className="app flex-row align-items-center">
        <Container>....
```....

when i compile with node app.js => importing the bootstrap file gives this error :

*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,f

SyntaxError: Unexpected token :

What could be missing ? maybe i require a webpack.config file to bundle my css code ?

Thanks

[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

[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;