score:10
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
score:0
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.
score:1
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.
score:3
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
score:19
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);
}
Source: stackoverflow.com
Related Query
- How to use SCSS variables into my React components
- How to get SCSS variables into react
- How to use scss variables in create react app?
- React - How to pass local variables into child components
- How to use environment variables in React app hosted in Azure
- How to use react j s components in react native app?
- React hooks: How to write variables in functional components that in class components were initialized in the constructor
- How to use redux-toolkit createSlice with React class components
- How to use Media Queries inside a React Styled Components Keyframe?
- how to import HTML file into React component and use it as a component?
- How to use react components from other files
- how to import data in react from a js file to use in components
- How can I use React Material UI's transition components to animate adding an item to a list?
- How to use system variables in package.json dependencies in my react project?
- Next.js: How to dynamically import external client-side only React components into Server-Side-Rendering apps developed?
- How to convert React class components into functional components and vice versa - IntelliJ
- How to use static variables with react hooks
- How to split react js components into multiple files
- How to use this.props in React Styled Components
- How i can use variables in stylesheet in React Native?
- How to use the updated value in redux store immediately after the action is dispatched in react js functional components
- How to use inheritance with React components and es6 classes
- problem in accessing the scss variables in react components
- How to parse a string with variables into a react component?
- How to Use AWS Amplify react components anywhere in an application
- Webpack does not copy the images that i use into react components
- How to write A React component library that allow scss variables to be overwriten
- How to implement react static scss into project?
- How to use router for switching between components with a key value pair in react
- How to use React BluePrint components with TypeScript?
More Query from same tag
- useState doesn't run correctly in websocket connection
- Updating the Chloropleth Tutorial to react-leaflet v3 With Function React Components
- My react-dates DateRangePicker is not working/rendering when clicked
- Change image in component based on dropdown value in another component using React
- react hook useffect has a missing dependency
- How can I promise chain a redux / sagas dispatch in React?
- Unit test redux reducer using it's own initial state
- Change Component property through onClick
- React JS - JSX returns [object Object] instead of string
- How to solve TypeScript error with axios response in React app
- Was refactoring my class component to Functional one, and faced a very difficult issue with useEffect
- How to set and get value of redux-form field
- Keep redux state on route change
- How to get values from child components in React
- Destructuring an object in TS
- 'delTodo' is not defined. React (line 51)
- Converting JavaScript React Component into TypeScript
- Cant access object passed to component React
- MobX not updating component properly
- Run a function on child component and call a function on parent component
- UI lags for a few seconds when building a large list in React
- How to store object values by getting the key dynamically?
- React Uncaught TypeError: _this2.setState is not a function
- importing images locally in react
- Equivalent of moment react in java
- Setting and updating state in React JS with Dropdown component from Material UI
- How to make owl-carousel responsive in React?
- Refer multiple Local video's path with API Response
- Reactjs - how to handle keys correctly in reused components
- Failed to compile ./src/App.js Line 30:3: 'onInputChange' is not defined no-undef