(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 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/@fortawesome/fontawesome-free-webfonts/scss/variables"; // unlikely to need this
/* Custom Stuff now everything has been defined */
Add sass and copycat options to plugins hash in brunch-config.js:
// tell sass-brunch where to look for files to @import
// 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
// copy .../webfonts/* to priv/static/fonts/
verbose : false
Put your customized variables, which can depend on bootstrap variables in web/static/asset/_custom-variables.scss: