I am currently working on a NextJs application where I have integrated bootstrap.
Package.json:
"dependencies": {
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"autoprefixer": "^9.8.6",
"bootstrap": "^4.5.3", <----------------------------
"next": "^10.0.3",
"next-compose-plugins": "^2.2.0",
"next-fonts": "^1.5.1",
"node-sass": "^5.0.0",
"postcss": "^7.0.35",
"postcss-easy-import": "^3.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-multi-carousel": "^2.5.5",
"reactstrap": "^8.7.1",
"sass": "^1.29.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
},
next.config.js:
const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');
module.exports = withSass(withCss({
webpack (config) {
config.module.rules.push({
test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
publicPath: './',
outputPath: 'static/',
name: '[name].[ext]'
}
}
});
return config
},
cssLoaderOptions: {
url: false
}
}));
pages/_app.tsx:
import React from "react";
import App from "next/app";
import 'bootstrap/dist/css/bootstrap.min.css';
import "react-multi-carousel/lib/styles.css";
import "../styles/styles.scss";
export default class ClnUi extends App {
render() {
const { Component, pageProps } = this.props;
return <Component {...pageProps} />;
}
}
pages/index.tsx:
const Home = () => (
<div class="container">
This is a container div..
</div>
)
export default Home;
In my project, I have imported bootstrap in _app.tsx and used it in index.tsx. Surprisingly, the CSS loads perfectly fine on localhost but not when deployed to Vercel at (projectname.vercel.app).
Could someone please assist me in identifying what could be causing the issue with the bootstrap CSS not loading only in the production environment?
Interestingly, the CSS import
import "../styles/styles.scss"; Thank you very much in advance for any help provided.