Just to clarify, I am utilizing react-bootstrap and attempting to incorporate bootstrap. Here is the code I have:
import React from 'react'
// bootstrap
import { Button } from 'react-bootstrap';
const MainDisplay = () => {
return (
<div className='MainDisplayContainer'>
<div className='Header'>
<button>Header</button>
</div>
<div className='Body'>
body
</div>
<div className='Footer'>
footer
</div>
</div>
)
}
export default MainDisplay
and here is the corresponding sass code:
@import "~bootstrap/scss/bootstrap";
.Header{
button{
@extend .btn;
}
}
.Body{
}
.Footer{
}
Basically, if I were to write this inline, it would look like this:
<button className='btn btn-info'>Header</button>
But how would I achieve this in the sass file?