The issue I'm facing is only present when building for production; in development, the styles appear correctly.
Despite my efforts, the bootstrap styles are not being applied at all. Only the styles from main.scss seem to be working. Unfortunately, I haven't been able to find any examples using app router + bootstrap + scss together.
Here is the structure of my files:
**/app
--/css**
----main.min.css
----main.min.css.map
**--/scss**
----_fonts.css
----_header_footer.scss
----_mixins.scss
----_responsive.scss
----main.scss
--layout.jsx
In the main.scss file, the imports include:
@import "bootstrap/dist/css/bootstrap.css";
@import "@fortawesome/fontawesome-free/css/all.min.css";
@import "nouislider/dist/nouislider.min.css";
@import "@splidejs/splide/dist/css/splide.min.css";
@import "_mixins";
@import "_header_footer";
@import "_fonts";
In layout.jsx (the RootLayout):
import './css/main.min.css'
During development, all styles apply perfectly. The problem arises after building, where the bootstrap classes in the JSX throughout the app cease to function.
I attempted adding this import to the layout.jsx file:
import "bootstrap/dist/css/bootstrap.css";
Although this makes the bootstrap styles work on build, some of my scss styles get overridden. For instance, the font applied to the body and the text decoration none for anchor tags, among others.
I also tried:
Adding the following code to _app.js:
import 'bootstrap/dist/css/bootstrap.css';
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
I even experimented with creating a global.scss file in the /app root and importing both bootstrap.min.css and my main.min.css:
Another attempt involved moving the import of boostrap.min.css further down in my main.scss file while omitting the 'min' in the imports.