SASS and CSS modules?

Question

css

In general, I made up everything with bootstrap + jquery and everything in static files, and about 2 months ago I decided to go further.
I started learning nodejs, builders (webpack, gulp) react, sass. Everything is cool, I like everything, convenient + interesting to develop, but the theme with component layout puts me a little in a stupor.
Just using the example of React, I want to understand how best to structure styles for components.
Today I saw a cool thing - css modules. It's great, but there are 2 things that I don't really like.
1) As I understand it, all styles go to the head tag of the document, which does not suit me.
2) You can't use preprocessors. Of course, there are compresses in css modules and you can enable some features, such as nesting, etc., but there are no cool features like functions in css modules.
So, I want to understand how best to work with styles without css modules, for example with sass.
All I could think of was to put each sass file in the folder with the component and import it into a common sass file.
React example:
src/components/Button/Button.jsx

import React, { Component } from 'react';

export default class Button extends Component {

  render() {
    return (
      <button type="button" className="button">
        {children}
      </button>
    );
  }

}

src/components/Button/Button.scss:

.button {
    background-color: blue;
    box-shadow: 0 0 3px rgba(0,0,0,.1);
    padding: 5px 20px;
}

src/app.scss Something like this. But, something tells me that this method is not very good, even if you write according to BEM to protect the code from breakages with redefinition, etc. then somehow it’s not clumsy to constantly import scss files from components into a common file. In general, I want to find a good way of component layout, but I can't find the information. I'm sure that I'm just not typing into Google correctly, maybe there are some other terms that I don't know about.
import './components/Button/Button.scss';

Answer 1

if you use webpack, then you don’t need to import everything into a separate file. But css-modules combined with postcss makes life easier.
And your version has the right to life. I myself did this for a long time, then stylus with its require solved this problem, but still I advise you to look towards css-modules. And if you don’t like or have any other reason about styles.someClass, then there is an alternative to react-css-modules (as far as I understand, you work with react).
https://github.com/gajus/react-css-modules