There is create-react-app (react 17), eject is executed to access the configs, there is the scss module index.module.scss and it uses the $white variable from the colors.scss file with colors. The module is isolated and there is no access to the variable. The only solution I found was to turn colors.scss into a module and import it into every scss file that uses color value variables. Is there a way to make these scss variables available to all files without doing this copying?
//colors.module.scss
$ white: #ffffff;
// index.module.scss
#import "~ scss/colors.module";
.wrapper {
background-color: $white;
}
I found an old solution here, this is one to one my situation, only in React, but I could not write it in the config so that it worked (if I understood correctly, in ./config/webpack.config.js), maybe someone can help with this
Using SCSS variables in CSS Modules
Related
I'm using node-sass in my react project. I have setup a index.scss that contains imports for my variables, mixins and all of my components. The index.scss is set to compile to index.css.
Now, I have a file called _variables.scss that I'm importing at the top of my index.scss:
// index.scss
#import "styles/variables";
#import "components/Button/Button";
In my Button.scss I'm setting color: $red_hero; and getting this error in my console:
Compiled src/index.scss to src/index.css.
Compiling...
Failed to compile.
SassError: Undefined variable: "$red-hero".
What's weird for me is that it used to work but now it doesn't anymore. What's even weirder is that the compiled index.css is rendering correctly, but the page refuses to render:
// index.css
.Button {
color: #A33343;
}
My guess is that it's an internal problem with sass and that the webpage isn't loading the index.css like it should. I've also noticed other strange behavior where a webpage is loading styling from a components scss-file even when I've neglected to import that component into my index.scss.
Any help or ideas would be greatly appreciated.
Solved!
After much more time spent problem solving than I care to admit, I narrowed the problem down to only happening when using the package generate-react-cli. An autogenerated component has a line at the top of the .js-file that imports it's scss file.
My setup is dependant on manually importing each components scss file into one root scss file that can be compiled to one regular css file, where placing imports to files with variables at the top of the index.scss makes those variables accessible to all other scss files. When a single component imports it's own scss-file with a variable in it the compiler doesn't know how to evaluate it, and thus it crashes.
Solution, don't import scss files from anywhere else but the main .scss-file.
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...
I would like to create mixin functions and use global variables from a global SCSS file without the needs of import the file for every SCSS file i am using.
I know that I can import a global SCSS file to every SCSS file manually and then yo use that "global" mixn but I don't want that the developer will have to remember to add it manually every time he is creating a new SCSS file.
I need a solution for reactjs.
You just need to import your global.scss that contain global variables to the project parent directory, in react's boiler plate it's the App.js.
You may now use those scss variables to any scss components without importing the global.scss everytime.
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
I'm having a difficult time figuring out how I can access Sass variables within a React component's sass file import. Here's my current directory structure, where I'm using Webpack to bundle everything:
components/
Sample/
Sample.jsx
Sample.scss
sass/
main.scss
variables.scss
Inside of Sample.jsx, I am importing Sample.sccs, however, the variables from variables.scss are not coming through, as I assume since they are separate modules, they don't share the same context?
I understand that I could fix this by simple not requiring the styles within the components's .jsx file but rather just import them all individually within main.scss, so they share the same context, but it would be nice to keep everything encapsulated.
You need to import variables.scss in the components/Sample/Sample.scss file.
Add the following at the top of components/Sample/Sample.scss file:
#import "../../../sass/variables.scss";