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?
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...
In my React app, instead of using styled-component or CSS-in-JS or importing a particular SCSS file into a component,
I used the SMACSS method where the only stylesheet that's being imported is the index.scss, which imports all the SCSS
files inside the styles directory.
Initially, I did the method of importing each SCSS file,
but I changed my mind after realizing that my file structure was messy and switched to the less modern way.
I'm just
wondering if there's a difference between importing each stylesheet and importing only one in terms of performance and
speed of an app.
I don't think it will make much difference in performance but you would be better off building up the good structure of code which is always recommended.
It's always good practice to create the single folder scss and then provide the references in main.scss of other files in folders like this way.
#import 'var';
#import 'mixins';
#import 'normalize';
#import 'default';
#import 'global/inputs';
#import 'global/btn';
#import 'components/modal-general';
#import 'components/modal-tabbed';
Then you can also use this single reference main.scss or index.scss in app.js or index.js
my question is little subjective.
so the scenario is like- I have n numbers of react components. Each
components have its respective css file. There are few common css files which are inside
assets/css/ files. I am simply importing common css file to my react component css file if needed.
for Example:-
There is a assets/css/color.css file which is common and used by few of components. I am importing assets/css/color.css to those css files which needs it. This way I am importing assets/css/color.css many times to different css files.
My question is- When webpack starts bundling the code how does it handle multiple import of same css file? Does importing same css files at many places leads to redundancy in bundle file?
The answer given by How does webpack handle multiple files importing the same module React imply that webpack will only bundle each library only once.
That's true for JS modules. Each module is embeded only once and webpack reuse the instance where appropriate.
However if you include another file inside that file, then it's up to how the css webpack module manage it.
For raw CSS, I think the file will get included only once as all is managed directly by webpack.
However if you use the sass loader and import some other sass file from your first sass file like that:
1.js File -> includes a.sass file -> #import another.sass file
2.js File -> includes b.sass file -> #import another.sass file
Then if another.sass file generate some classes definition, you'll see that these classes appear multiple times in the output. This is because webpack doesn't know about the duplication because it's handled at the sass loader level.
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