customizing bulma with react - reactjs

I try to customize the bulma default colors. I have installed node-sass and it appears to be working and in my root scss file ive written the script
#import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
#import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
#import '../node_modules/bulma/css/bulma.css'
However this does not appear to be changing the primary color in my project or the primary font choice. Ive imported this file into my index.js file on react and bulma is definitely working just not accepting my customizations.
Update: here is the link to the bulma docs describing how to do this
http://bulma.io/documentation/overview/customize/ I tried it that way with no success as well

I think your .scss file looks good, though you don't need to include the .sass extension (it looks like you're writing .scss, not .sass, anyway so I'd remove it.)
The main thing is you need to include a build process that will transform the scss to css. See this part of the CRA docs.
Basically in your package.json scripts:
json
"build:css": "node-sass ./src/scss/main.scss ./build/main.css",
"build:css:watch": "npm run build:css -- -w",
My script above is putting the css in build folder and I'm using a link tag in index.html, but you could build and import as well.

Hey guys after taking the advice above I reconfigured the package json. Another side note I changed my source sass script to this
#import '../node_modules/bulma/sass/utilities/initial-variables.sass';
$blue: #72d0eb;
$pink: #ffb3b3;
$pink-invert: #fff;
$family-serif: "Merriweather", "Georgia", serif;
#import '../node_modules/bulma/sass/utilities/derived-variables.sass';
$primary: $pink;
$primary-invert: $pink-invert;
$family-primary: $family-serif;
#import '../node_modules/bulma/bulma.sass'
You have to point your scss or sass file to the bulma.sass not the bulma.css file since your wanting to create a new build of the bulma.css file other than the one that comes packaged with it
Cheers

Related

Sass #use - import multiple times the same file

I have Reactjs project, using sass. I updated my Sass version from using node-sass to "sass": "^1.38.0" (dart-sass).
I just change all my imports in scss files from using #Import to use #Use rule:
from:
#import "./src/general.scss";
to:
#use "src/general" as *;
I use this line of css in multiple Scss files, across the whole project.
Still, I see my "body" attribute from "_global.scss" file loaded tones of times, and it makes my debugging mode to be very slow, because each element I try to look at in the devtools, it take long time.
Any suggestions?

How to import Bootstrap variables into SASS module?

is there a way to use Bootstrap SASS variables in SASS module?
For example I have file index.module.scss inside my react/NextJS project. How can I use in that sass module variable from bootstrap? Something like this:
.hero{
color: $blue-200;
}
If i just add this import at start of file:
#import '~bootstrap/scss/bootstrap.scss';
I got this error (from NextJS):
Let me notice, that when I use this import in non-module sass file (lets say in file index.scss), then it works. But I need (want) to use SASS modules...
Any idea how to solve it?
Thanks!
Oh, I find a solution. I can add this three imports (instead that one bootstrap imports):
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
These three imports together works and doesn't cause error...

upgrading React script from 1.x to 3.x breaks sass variables (font awesome)

Im using a react resume template for my portfolio site.
Everything worked fine when i was on react-script 1.x.
Yesterday I updated my site to use a three.js animation, and when trying to deploy the site I got a fail to minify error. I updated to "react-scripts": "3.4.1"
After updating react-scripts, I got an error to install node-sass, which i did.
And now I have a sass variable error.
SassError: Undefined variable: "$fa-css-prefix".
on line 3 of /home/tom/Desktop/lighthouse/react-resume-template/public/css/font-awesome/scss/_fixed-width.scss
>> .#{$fa-css-prefix}-fw {
I know basically nothing about sass and css variables... and importing these things. I don't actually see any import statements other than in the main font-awesome.scss so I'm kind of lost.
font-awesome.scss
#import "variables";
#import "mixins";
#import "path";
#import "core";
#import "larger";
#import "fixed-width";
#import "list";
#import "bordered-pulled";
#import "spinning";
#import "rotated-flipped";
#import "stacked";
#import "icons";
_fixed-width.scss
.#{$fa-css-prefix}-fw {
width: (18em / 14);
text-align: center;
}
From what you've reported it sounds like:
A) you upgraded unrelated library X (react-scripts)
B) this forced you to upgrade library Y (node-sass)
C) now library Z (font-awesome) isn't working because of the upgrade to Y
While I don't know the specifics of each library, it's very possible that the problem is you have an old library Z, relative to your new library Y. If that's the case, simply doing:
npm rm font-awesome
npm i font-awesome
should give you the latest font-awesome ... and given that it is a pretty popular library, that new version likely will work with the latest node-sass.

problems in importing styles for react-alice-carousel

I am trying to use react-alice-carousel,
And in the section of How To Use, It said something like this.
Style import
SCSS
#import "react-alice-carousel/src/alice-carousel.scss";
CSS
#import "react-alice-carousel/lib/alice-carousel.css";
Webpack
#import "react-alice-carousel/lib/alice-carousel.css";
And I am unable to import these files in my local project and so I am not getting the desired outcome.
You may have the wrong .scss file path. It should be:
#import "react-alice-carousel/lib/scss/alice-carousel.scss";
If you don't have node-sass you'll probably need to import the css file. I'd recommend importing it in your top level css file. Which would be index.css if you're using create-react-app.

Add own scss files to the appName-all.scss

In scss I would usually add other scss files using the #import command.
With sencha cmd the SCSS file for my ExtJS app is generated.
Where and how do I add custom styles which then should be compiled into the app-all.css?
I don't want to create a custom theme (because I think that's an overkill)
I am using the default Classic theme, ExtJS 4.2 with Sencha Cmd 3.1.2
I see $include variables in the generated app-all.scss but there are no #imports for my custom scss files
generated appName-all.scss
...
$include-ext-window-messagebox: true;
$include-ext-window-window: true;
$include-appname-app-application: true;
$include-appname-controller-customer: true;
$include-appname-view-listings-index: true;
...
#import '../../../packages/ext-theme-classic/sass/var/window/MessageBox';
#import '../../../packages/ext-theme-classic/sass/var/window/Window';
...
#import '../../../packages/ext-theme-classic/sass/src/window/MessageBox';
#import '../../../packages/ext-theme-classic/sass/src/window/Window';
...
I've put my custom scss files into the existing appName/sass/src folder like this:
appname/view/listings/Index.scss
Unfortunately this seems to be ignored, when executing sencha app build..
How do I configure Sencha Cmd to include my custom scss files when generating appname-all.scss?
Oh wow.. just read my own question and had the idea that actually my folder structure is not really the same as extjs native structure (theme/sass/src vs sass/src/appName)
moving my Index.scss to appName/sass/src/view/listing/Index.scss solved the problem totally :)
new appName-all.scss after sencha app build
/* including package appName */
$branchenbuchAdmin-resource-path: 'images' !default;
$relative-image-path-for-uis: $appName-resource-path;
#import '../../../apps/appName/sass/src/view/listings/Index';
Loving it :)

Resources