mathieu/start_sass-bootstrap_project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

load bootstrap scss in compilation

Browse Source
This commit is contained in:
Mathieu Jaumotte 2022-11-07 15:00:41 +01:00
parent 52975f8b81
commit 9217d88792
6 changed files with 70 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/package.json
View File

@ -2,7 +2,7 @@
"name": "bimbam", "name": "bimbam",
"version": "0.0.1", "version": "0.0.1",
"author": "Champs-Libres", "author": "Champs-Libres",
"description": "", "description": "boum",
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.6", "@popperjs/core": "^2.11.6",
"bootstrap": "^5.2.2" "bootstrap": "^5.2.2"

1
app/scss/custom.scss → app/scss/_custom.scss
View File

@ -1,3 +1,4 @@
div.coucou { div.coucou {
margin: 1em; margin: 1em;
padding: 2em; padding: 2em;

2
app/scss/_variables.scss Normal file
View File

@ -0,0 +1,2 @@
$primary: pink;
$enable-shadows: true;

61
app/scss/styles.scss Normal file
View File

@ -0,0 +1,61 @@
/// ------------------------------------
/// Option A: Include all of Bootstrap
/// ------------------------------------
//@import "../node_modules/bootstrap/scss/bootstrap";
/// ------------------------------------
/// Option B: Include parts of Bootstrap
/// ------------------------------------
@import "../node_modules/bootstrap/scss/mixins/banner";
@include bsBanner("");
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
@import "variables";
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/button-group";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/accordion";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/pagination";
@import "../node_modules/bootstrap/scss/badge";
@import "../node_modules/bootstrap/scss/alert";
@import "../node_modules/bootstrap/scss/progress";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/toasts";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/tooltip";
@import "../node_modules/bootstrap/scss/popover";
@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/spinners";
@import "../node_modules/bootstrap/scss/offcanvas";
@import "../node_modules/bootstrap/scss/placeholders";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
// 5. Add additional custom code here
@import "custom";

6
app/src/index.html
View File

@ -3,12 +3,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../scss/custom.scss"> <link rel="stylesheet" href="../scss/styles.scss">
</head> </head>
<body> <body>
<button type="button" name="button" class="btn btn-primary btn-lg"> <button type="button" name="button" class="btn btn-primary btn-lg m-4">
hello marcelo hello Marcel
</button> </button>
<div class="coucou"> <div class="coucou">

2
app/src/index.js
View File

@ -1,3 +1,5 @@
//require('bootstrap/scss/bootstrap.scss');
// Import all plugins // Import all plugins
import * as bootstrap from 'bootstrap'; import * as bootstrap from 'bootstrap';