How should I override a derived Bulma variable using SCSS? - sass

I'm using Bulma with Webpack 4. I'm trying to change the colour of button.is-primary to be pink instead of turquoise.
Here's the entire contents of my .scss file.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";
This is getting me the following error on build.
1>Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
1>
1>$primary: $pink;
1> ^
1> Undefined variable: "$pink".
Now, if I set $primary to be a specific hex colour it builds fine, so this issue seems to be because I'm trying to use the existing colour variable $pink. It does make sense to me that it hasn't been defined at that point, but the docs clearly say that I can add my overrides before importing Bulma, and their example does the same thing.
Can anyone point me in the right direction?
EDIT: here's the documentation screen I'm looking at.
https://bulma.io/documentation/customize/with-webpack/
I note that in their example they do set new values for derived variables BUT only where they've redefined the intial value, like this...
$pink: #FA7C91;
If I change my .scss file as follows it does then compile and work as expected.
#charset "utf-8";
#import url('https://fonts.googleapis.com/css?family=Poppins:600');
$body-size: 14px;
$pink: #FA7C91;
$primary: $pink;
#import "../../node_modules/bulma/bulma.sass";

This should clarify things for you: https://versions.bulma.io/0.7.0/documentation/overview/customize/
// 1. Import the initial variables
#import "../sass/utilities/initial-variables";
// 2. Set your own initial variables (optional)
$pink: #ffb3b3;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;

In my case, I forgot that I was importing Bulma via its compiled .css file.
Of course, you cannot override the Sass variables that way because after compilation they don't exist. To override Bulma's variables you need to import its .sass file(s), not its .css file.
Sharing in case anyone else makes the same mistake.

Related

Use different boostrap _variables files on different .env variables Laravel 8

Is there a way to use different bootstrap variables by using custom _variables file, selected upon some .env variable of Laravel 8?
something like, in app.scss:
if APP_VARIABLE = 1, then #import custom1_variables.scss
if APP_VARIABLE = 2, then #import custom2_variables.scss
and so on...
Would only want to select different _variables file, not the main app.scss file, which would be the same for all versions, but using its own _variables file.
Thank you!
UPDATE
Thanks to Gert B. suggestion, doing what how to get env variable in scss describes, I have had no success.
Add my variables in .env file,
MIX_VARIABLES='variables1.scss'
In my webpack.mix.js:
mix.sass('resources/sass/app.scss', 'public/css',
{prependData: 'custom_variables:\'resources/sass/'+process.env.MIX_VARIABLES+'\''}).version()
Next, I have used my 'custom_variables' in my app.scss:
#import 'custom_variables';
But then I get an error of
Can't find stylesheet to import.
What am I missing?

Laravel - Sass variables

I'm coming to you because I would like to use the Tabulator http://tabulator.info/ library in a Laravel project. I have correctly installed the library in my project (import of css and js scripts).
Terminal :
npm install tabulator-tables
resources/js/app.js:
window.Tabulator = require('tabulator-tables/dist/js/tabulator.js');
resources/js/app.scss:
#import 'variables';
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
#import "../../node_modules/tabulator-tables/dist/css/bootstrap/tabulator_bootstrap.min.css";
And to stylize the tables a bit, Tabulator provides a system to use sass variables.
resources/js/_variables.scss:
$backgroundColor:black;
$headerBackgroundColor: #3F3F3F;
$headerTextColor: #fff;
$borderColor:#FFE6;
$rowTextColor: #000000;
$rowSelectedBackground: #FFE6A8;
#import "../../node_modules/tabulator-tables/dist/css/tabulator_simple.min.css";
But as indicated in the documentation http://tabulator.info/docs/4.9/style#sass, it is enough to override the variables used by the library to style the tables. But when I do npm run dev, no changes are made. Would you have an idea ?
Sorry i have noticed that i import the wrong file in resources/scss/app.scss.
//wrong way
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
//good way
#import "../../node_modules/tabulator-tables/src/scss/tabulator_simple";

Sass #use not working with separated mixin files into master mixin file (ERR: Undefined Mixin)

I'm a bit newer to sass, but when I was learning it the Sass website said to start using #use instead of import, so after a lot of trial and error I finally figured out how to use it pretty much the same as import.
Note: I'm using Prepros for compiling.
I have this mixin in it's own file inside of a mixins folder:
// scss/mixins/_flex.scss
#mixin flex($flex-flow: row, $justify-content: center, $align-items: center) {
display: flex;
justify-content: $justify-content;
align-items: $align-items;
flex-flow: $flex-flow;
}
I tried #useing it in my main _mixins.scss file:
// scss/_mixins.scss
#use "mixins/flex" as *;
Then I tried using it in another one of my files containing common elements:
// scss/_common_elements.scss
#use "mixins" as *;
.flex {
#include flex();
}
Then I receive the error inside of Prepros log: Undefined Mixin where I call the #include flex(); line (inside of _common_elements.scss)
It was working until I decided to put the mixins in their own separate folder, but this is the same as how it's setup inside of Bootstraps source code.
This whole process of using #use has been really confusing.
Does anyone know why I might be getting this error?
I managed to fix it!
ALSO: If you can help me edit this question / answer to better explain it with proper language, please post suggestions and I'll update it.
In the _mixins.scss file I needed to use #forward "mixins/flex" instead of #use "mixins/flex" as *;:
Like this:
// scss/_mixins.scss
#forward "mixins/flex";
#forward "mixins/overlay";
#forward "mixins/etc...";
I wish they would've made this something more clear on the actual sass #use documentation.
Here are the actual docs to #forward.
to use #use command and other new features of sass, you need to install dart sass, and not node-sass;
https://www.npmjs.com/package/sass

Why I cannot assign my sass variables in my file system?

I am practicing sass in my code editor. When I tried to compile my sass file and built a watcher. I receive:
Jiatongs-MacBook-Pro:6_myLandingPage_starter jiatongli$ sass --watch sass:css
Error: Undefined variable.
background-color: $white
^^^^^^
sass/modules/_navbar.sass 3:21 #import
sass/modules/_modules-dir.sass 1:9 #import
sass/app.sass 3:9 root stylesheet
Because I cannoStackOverflow files here on stackoverflow, I link my github repository which is:
https://github.com/riederleeDEV/SASS-project.git.
It seems like the sass watcher cannot capture my file import and I do
not know where went wrong
Here is the command I used: sass --watch SASS:CSS(the command should not have any error)
After I checked the file, I discovered that there is nothing wrong with my app.sass import nor the typo. Just want to ask where I went wrong?
Try this:
<···· Move variables to top
#import "base/base-dir" |
#import "layout/layout-dir" |
#import "modules/modules-dir" |
|
#import "variables" ············
#import "mixins.sass"

Sass sprites not working in deep nested folder

I'm using SASS sprites: http://compass-style.org/help/tutorials/spriting/
'channel' is the folder name in 'images' that contains my images to be sprited. The following does create an image sprite:
#import "compass/utilities/sprites";
#import "channel/*.png";
#include all-channel-sprites;
However the image path in the CSS is slightly wrong. Its output is this:
background-image: url('/images/channel-s78ec12c377.png')
But I actually need this:
background-image: url('../images/channel-s78ec12c377.png')
I've tried changing my import to this but it throws an error:
#import "../channel/*.png";
Turns out it was to do with the config.rb file. It needed this line:
relative_assets = true

Resources