(I changed the primary color)
But it doesn't work as there's no such variable as `$violet` since this is before I import bootstrap. Is this just an issue with Bootstrap or that Bootstrap is just bad for customization, or am I doing something seriously wrong?
Iβm on the phone right now so havenβt verified this, but can you try importing the _variables.scss file before redefining the variables and then importing bootstrap at the end?
I found it easiest to use app.scss as your entry point, and pull in your customized sass (such as _custom.scss) files into that.
I also found the order important, as you want to import _custom.scss before the rest of the bootstrap scss files.
If you really wanted to cut down on the final size, you can also use something like postcss-brunch and a plugin like uncss-brunch to strip your pages of unused CSS.
Yeap. Thatβs how I setup bootstrap. Also, I meant $indigo hehe. Was pretty late, brain wasnβt functioning at itβs best. The problem here is that in my custom scss file, I canβt just redefine $theme-colors() and use stuff like $indigo, etc. as they donβt exist, since bootstrap was never imported.
New projects now include a root-level assets/ directory, which serves as a self-contained location for your asset builderβs config, source files, and packages. This changer keeps things like node_modules, package.json, and brunch-config.js from leaking into the root of your elixir application. Update your app to the new structure by following these steps:
thank you for coming back @gpb. I have the latest Phoenix 1.3 but generating a new project put the files in the root. Obviously having read the link Chris suggests moving those files. Does that mean the generator is out of date? Again slightly confused.
renamed web/static/css/app.css to web/static/css/app.sccs and adjusted to include:
// Specify explicitly so you don't get some other packages functions or variables
// for example fontawesome also has variables
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
// @import "node_modules/@fortawesome/fontawesome-free-webfonts/scss/variables"; // unlikely to need this
@import "custom_variables";
@import "bootstrap";
@import "fontawesome";
@import "fa-solid";
/* Custom Stuff now everything has been defined */
@import "custom";
Add sass and copycat options to plugins hash in brunch-config.js:
sass: {
options: {
// tell sass-brunch where to look for files to @import
includePaths: [
"node_modules/@fortawesome/fontawesome-free-webfonts/scss",
"node_modules/bootstrap/scss"
],
// includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // tell sass-brunch where to look for files to @import
precision: 8 // minimum precision required by bootstrap-sass
}
},
copycat: {
// copy .../webfonts/* to priv/static/fonts/
"fonts": [
"node_modules/@fortawesome/fontawesome-free-webfonts/webfonts"
],
verbose : false
}
Put your customized variables, which can depend on bootstrap variables in web/static/asset/_custom-variables.scss: