score:0
are you using webpacker or a similar gem to manage this? webpack is smart enough to reuse imports - it won't include it a ton of times.
that said, since css is global, you only need to import main.scss
once anyway, at the top level.
score:0
since you are using webpack, one option would be to compile scss to plain css and include it as a stylesheet in the root html page, most likely, index.html
score:1
does react loads my scss styles 42 times
i just did the experiment, the answer is no. although this, it is still not recommended to put all styles in a file. i think you should separate your main.module.scss
to many small files.
there are 2 kinds of css style.
one is a global style which shared by multiple components, for example, you define it in global.scss
file, this file is just needed to import once at the top level js file.
// global.scss
.container {
padding: 10px;
}
// applicaiton.js
import "global.scss"
// examplecomponent.jsx, don't need to import "global.scss"
// classname should be the string
...
render() {
return <div classname='container'>example</div>
}
another one is a module style which is only used by a component or a very few components, and it should just include the styles only used in the target component, it is usually small and has the same name as the component.
// examplecomponent.module.scss
.container {
margin: 10px;
}
// examplecomponent.jsx
import * as styles from 'examplecomponent.module.scss'
...
render() {
return <div classname={styles.container}>example</div>
}
if you want to mix the global style and module style in the same element, you can use classnames
npm or like this:
// examplecomponent.jsx
import * as styles from 'examplecomponent.module.scss'
...
render() {
return <div classname={`container ${styles.container}`}>example</div>
}
Source: stackoverflow.com
Related Query
- Importing styles in multiple components on React
- React : Firing a custom alert from multiple components using an existing component having its own styles
- Importing multiple React Components
- Is there a way to render multiple React components in the React.render() function?
- React Material UI - Export multiple higher order components
- having multiple instance of same reusable redux react components on the same page/route
- Importing CSS files in Isomorphic React Components
- Setting Complex react inline styles such as hover, active on react components such as button
- Importing multiple files in react
- React conditional rendering of multiple child components
- How does webpack handle multiple files importing the same module React
- Multiple React components in a single module
- React & Redux : connect() to multiple components & best practices
- Render multiple components in React Router
- Overriding react components styles with styled component
- React Multiple Higher-Order Components
- Share the same styles between two types of component with React Styled Components
- How to split react js components into multiple files
- when multiple React DOM components are used without outer div then JSX won't compile
- React - How to Export Multiple Components on same File, preventing <Unknown/> Component on Dev Tools
- what is proper way to import multiple components from same file in react instead of getting each component imported
- svg not rendering correctly when used with by multiple react components
- Render multiple React components into a single DOM element
- Send multiple props across components React
- React Native Extending Multiple Components vs createClass
- Javascript ReactJs Importing multiple components as groups possible?
- Passing a function down multiple children components in React using ES6
- react js importing multiple component from a single jsx file
- react router preload data from multiple components with a single loader animation
- React & React-router async components mounted multiple times (componentDidMount called many times)
More Query from same tag
- React how to toggle onclick to false after you already clicked?
- ReactJS Array fill with key in JSX element
- Added react-snap to a react project and unlinked pages and 404 are not loading with correct content
- Uniting list of elements to one table row in react
- Reactjs, typescript unable to set initial state inside component
- How to override Next.js `*.svg` module declaration?
- Selected dropdown value isn't showing in button in React
- webapi 404 not found when calling from react with post action
- Database SQL design
- Why does jsx require three dots in this code?
- Invalid custom hook call
- Get key from datalist in Form.Control
- Select rows issue in pagination react table
- How to show a default view in React?
- Incorrect Redux action for API call
- React - Clear form after submit with Context API state management
- React, how to return a value from function to component?
- addComponentAsRefTo(...): Only a ReactOwner can have refs - Error in Form with Select List
- How do I set the text color of primary raised buttons for React Material UI?
- Can't Load Models for face-api.js
- mapDispatchToProps() in Connect(App) must return a plain object. Instead received [object Promise]
- How to stop random links from opening with react-router?
- Create-react-app dependency version issues
- How to use mobx-react 'observer' without decorator syntax?
- Redux CombineReducers returns defaultState after every action that is dispatched
- Architecture example for a multi-language application using React, React Redux or React Context, and Material UI
- How can I stop the execution of my promise based on the boolean value of my prop?
- The beautiful way for setting m and p responsively for a `Box` in Material-UI v4
- Hello, i use NextJs and i need to achieve url like page/[id]/[slug] from page
- How to add objects into an array of reducer?