I try to customize the Bulma default yellow colors for my Next.js project.
I have one global Sass file where I am changing the default $yellow and $warning color. However, when I import this file in my _app.js, nothing happens.
#import "../node_modules/bulma/sass/utilities/initial-variables"
$yellow: #dc7185
$warning: $yellow
#import "bulma/css/bulma.css"
Since you want to overwrite Sass variables you'll want to import the Sass file rather than the CSS one.
/* You global Sass file */
$yellow: #dc7185;
$warning: $yellow;
#import "~bulma/bulma.sass";
Related
I use Bootstrap with SASS in my React (Next.js) project. I would now like to use the SASS variables of Bootstrap in the SASS modules (scoped) of the components.
/styles/style.scss
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/maps";
#import "~bootstrap/scss/utilities";
#import "~bootstrap/scss/utilities/api";
#import "~bootstrap/scss/containers";
#import "~bootstrap/scss/grid";
#import "~bootstrap/scss/root";
#import "~bootstrap/scss/reboot";
/pages/_app.tsx
import '../styles/style.scss'
/components/text/style.module.scss
.text {
font-size: $font-size-lg;
}
Of course, I now get an error because $font-size-lg was not defined.
How do I provide the bootstrap variables in the module files so I can use them?
What is the problem ?
You are importing the Bootstrap SASS variables file in your global style.scss file. However, the SASS modules (scoped) of your React components are not aware of the variables defined in the global file.
Solution
One way to make the variables available in your SASS modules is to define them again in the module files, this way you'll have to import the variables file in every SASS file.
To avoid importing variables file in every SASS file is by defining them globally in a way that they are shared among all the SASS files. You can do this by using the CSS :export directive.
For example, in your style.scss file, you can define the variables using the :export directive:
#import "~bootstrap/scss/variables";
:export {
font-size-lg: $font-size-lg;
// other variables
}
Then in your SASS modules (scoped) of your React components, you can import these variables by using the :import directive:
:import {
font-size-lg
} from '../styles/style.scss';
.text {
font-size: font-size-lg;
}
Extra
You can also use a library like sass-module-dts-generator that will generate a typeScript file with all the exported variables, this way you'll be able to use them in your JavaScript code.
I have checked the "How to Use Sass with CSS Modules in Next.js" guide at freecodeCamp and it seems that you should import the bootstrap variables directly in your scss module.
Will it not work, if you import your /styles/style.scss in the /components/text/style.module.scss with the following import command?
#import "../../styles/style.scss"
Unfortunately, I cannot check it myself.
I'm trying to build a component library for angular and react. That's why I want to use the same styles(sass) for both libs. I created a separate folder for my styles and included my main sass inside the component. but when I try to make a test npm build and tried to use inside an angular project I paced this problem
how can I solve this?
as found in this blogpost.
create a lib for styles
nx generate #nrwl/angular:library ui
The problem now, is the #import in all the scss files.
How to make them recognize the correct files?
On angular.json on every project the path will have to be included.
"projects": {
"ds-project": {
"projectType": "application",
...
"architect": {
"build": {
...
"stylePreprocessorOptions": {
"includePaths": [ "libs/ui/src/lib/styles" ]
},
"extractCss": true,
...
Now you can import the mixins on the scss files of your project just like if they were still part of the project:
#import "mixins/list_mixin";
#import "variables";
#include list_layout;
Even the base style, like font-family are importable.
Inside the style.scss of the project to became the global styles (for this case the module contains the global styles).
// styles.scss
/* You can add global styles to this file, and also import other style files */
#import 'module';
I am trying to customize a react app in bootstrap.
inside src/custom.scss
#import "~bootstrap/scss/bootstrap";
however, is there any way to import react-bootstrap
Customize Bootstrap
If you wish to customize the Bootstrap theme or any Bootstrap variables you can create a custom Sass file:
/* The following block can be included in a custom.scss
/* make the customizations */
$theme-colors: (
"info": tomato,
"danger": teal
);
/*import bootstrap to set changes */
#import "~bootstrap/scss/bootstrap";
... And import it on the main Sass file.
/* The following line can be included in a src/App.scss */
#import "custom";
This question already has answers here:
customizing boostrap with Sass; where exactly should I import bootstrap in my scss file?
(1 answer)
Add new utilities with Bootstrap 5
(5 answers)
How to extend/modify (customize) Bootstrap with SASS
(4 answers)
Closed 1 year ago.
I am trying to customize the predefined Bootstrap colors with Sass following the documentation.
I created a CustomBootstrap.scss file with the following contents:
#import "~bootstrap/scss/bootstrap";
$primary: #2c82c9;
This should normally override the $primary theme color with #2c82c9.
All variables in the $theme-colors map are defined as standalone variables.
But the color stays the same when using it like for example: bg-primary.
I am using React TypeScript, "bootstrap": "^5.0.1", "node-sass": "^6.0.0", other styles work so everything should be imported correctly.
The problem was that the variables should be set before the bootstrap import that way it overrides them, I use the following setup now.
I have a _variables.scss file where I keep my override variables and custom variables.
// overrides
$primary: #2191fb;
// custom
$success-light: #57cc99;
In my custombs.scss file I import the variables file and also do the required imports for adding extra custom variables and do the color setting and map merging.
// import custom variables
#import "./variables";
// required imports
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
// set custom colors
$custom-colors: (
"success-light": $success-light,
);
// merge maps
$theme-colors: map-merge($theme-colors, $custom-colors);
I have a styles.scss file for my other styling.
body {
font-family: "Montserrat", sans-serif;
}
And in my Main.scss I import all the needed files, with bootstrap at last (I believe this is correct).
// font
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&family=Newsreader:wght#200;300;500&display=swap");
// styles
#import "./styles";
// bootstrap customization
#import "./custombs";
#import "~bootstrap/scss/bootstrap";
This way I only need one import in my index file.
import "./styles/Main.scss";
I would like some feedback on this setup, if it is correct, better ways... I am new to scss.
I am working on a React project that follows this structure
src |
components |
Footer |
index.jsx
styles.scss
Header |
index.jsx
styles.scss
scss |
helpers.scss
variables.scss
...
main.scss
Into my variables file I was using the css custom variables so, all them where on :root and I can access them in my components styles.
When I wanted to create the dark colours I wanted to use the SCSS function darken, but it does not evaluate them and throws an error saying that var(--blue) is not a valid colour.
As a solution I decided to move all the variables into a SCSS variables but when project is building it throws another error that says that a $blue is not defined.
The unique solution possible I can use, it is to include the variables file in all the styles files but, I do not know if there are a better solution for the structure that I am using.
From React 17
To access your scss variables into the react component, you need to do something like that
Install node-sass as a dependency or dev dependency
No need to do any config change in webpack
import as a module <-- main point
variables.module.scss
$color: skyblue;
$primaryColor: red;
:export {
color: $color;
primary-color: $primaryColor;
}
App.js
import variables from '<YOUR_PATH>/variables.module.scss';
const App = () => {
console.log(variables);
}
If you don't want to use styled-component
then you can follow this link.
https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript
I use a similar structure to organize my .scss files. I like having the styles in the same folder as the component. However, I import all scss files to my main.scss file. This helps avoid style conflicts in the DOM.
main.scss
import "./scss/helpers.scss"
import "./variables.scss"
import "./Footer/style.scss"
import "./Header/styles.scss"
Make sure to name your files with an underscore so that all the files get merged on compilation. Note you don't need to name the underscore in the import.
_helpers.scss
_variable.scss
_style.scss
Using this method you only need to import styles once into your app. index.jsx
There are different ways I can recomend you to tackle this.
1- Duplicate the values of those variables. Add them both on your variables.scss and as constants in some other file, maybe config.js or constants.js that way you'll be able to reference these values from your react components, the downside to this, is you'll have to remember to change them in two places if you have to modify the value.
2- Consider using styled-components. With styled components you can define your styles within your components, using variables or props within the styles.
3- Use some mechanism to define these variables in a single file or as environment variables, and setup your build process to be able to import these values into js and scss files.
It is possible to use custom variables with that project structure using css-vars mixin.
After proposing the option to evaluate custom variables before executing the SCSS function, a guy suggested me this mixin. I have just tested and works pretty nice.