I have the following .sass file in /src/style
.error {
color: red;
}
and the following line in app.js
import "./style/styles.sass";
When the app renders a , the red style is not applied. Are there additional steps I need to take to import a SASS file and apply it's style rules?
You need to have node-sass installed to get .scss and .sass files to work in CRA
You can install it like so:
$ npm install node-sass --save
$ # or
$ yarn add node-sass
From the CRA docs
You said
Here's my .scss file: .error { color: red; } .nav { border: 1px solid blue; }
Therefore, the import should be this:
import "./style/styles.scss";
NOT this:
import "./style/styles.sass";
Ok, the problem was that somehow, something deleted all the text in my .scss file. I've restored that file and things are working now. Thanks for all the help though.
Related
I'm trying to add the Normalize.css from node_modules but it doesn't work.
I have tried everything, from a custom configuration for webpack (I'm using version 5 for my React project), to importing it into the preview.js and preview-head.html, but I can't get it to work, Storybook still keeps putting me the browser styles and it's very frustrating, because in my React project I want to use a css normalizer.
Can someone give me an example of how it would be done? Since what I have found in the documentation and on the internet has not helped me or I have not known how to do it.
Thanks
You can try put the style tag in preview-head.html
Like this:
<style>
/* copy-paste normalize code hire */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
...
</style>
The storybook docs mention importing your css in preview.js
https://storybook.js.org/docs/react/configure/styling-and-css#importing-css-files
To use your CSS in all stories, you import it in .storybook/preview.js
// ./storybook/preview.js
import 'normalize.css';
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
I am starting a new website in React and I need to use a font from Google called FredokaOne.
I have used the command:
npm install --save typeface-fredoka-one
Everything went well but I can't figure-out how to use it.
I tried this :
font-family: FredokaOne;
font-size: 40px;
But it still using the default font. Is there a way to checkout the proper font to use ?
or any missing params.
Thanks
Regards
You can add #import inside index.css file of react project.
Index.css
#import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
*{
font-family: 'Fredoka One', cursive;
}
Is there a default way to set localIdentName for css modules without ejecting?
I couldn't find such an option on the official docs so I decided to ask here if someone by any chance knows a way without ejecting and tempering with the webpack.config.js.
You do not need to eject.
Create-React-App supports css modules right out of the box as of version 2, which is now stable.
Upgrade to v2 (react-scripts#latest) by running yarn upgrade react-scripts#latest.
You just have to create a file with the extension .module.css
For example:
.myStyle {
color: #fff
}
Then you can use it like so:
import React from 'react'
import styles from 'mycssmodule.module.css'
export default () => <div className={styles.myStyle}>We are styled!</div>
To read more - https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
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