Next.js with SCSS split to files for each component

Question

I'm new in Next.js, regular to work with create-react-app (ejected).
With the configuration in create-react-app I was able to work with SCSS not in CSS-module approach, but with split SCSS files.

For example:

ComponentA.jsx

import React from 'react';
import './ComponentA.scss';

const ComponentA = () => {
} 

ComponentB.jsx

import React from 'react';
import './ComponentB.scss';

const ComponentB = () => {
} 

I have read the following:
https://medium.com/@vladymyr.pylypchatin/the-simple-way-to-use-scoped-and-global-scss-with-next-js-67cdb2d0c676
NextJS component level SASS styling

But these solutions don't fit my needs.

My question:
There is a a way to write local SCSS files for each component, with put CSS-module approach or <style jsx> approach, just import SCSS (like in the example I added) for each component?, (I'm aware of the scoping issue, I will manage the class names manually by myself).
But keep the bundle to one large CSS file when the bundle is built, as webpack does.

Thanks.

Answer 1

You were almost there, you can use the css module by importing the scss file with a name.

import React from 'react';
import style from './ComponentA.scss';

const ComponentA = () => {
   return <div className={style.blockOne}>A</div>
} 

And

import React from 'react';
import style from './ComponentB.scss';

const ComponentB = () => {
   return <div className={style.blockOne}>A</div>
} 

Then when you build your app with typescript, it will put all the style within the same file as your logic, including the css.

Example of generated app from typescript

...
var Button = function (props) {
    return (React.createElement("button", { form: props.form, type: props.type, onMouseOver: props.onMouseOver, className: "" + style$1.button + (props.className ? " " + props.className : "") + (props.disabled ? " " + style$1.disabled : "") + variableClass(style$1, props.removeShadow ? "removeShadow" : ""), onClick: props.onClick, disabled: props.disabled },
        props.leftIcon ? (React.createElement("div", { className: style$1.leftIcon }, props.leftIcon)) : null,
        React.createElement("div", { className: style$1.buttonValue }, props.children),
        props.icon ? React.createElement("div", { className: style$1.icon }, props.icon) : null));
};

var css_248z$2 = ".style-module_input__3-5Pc {\n  display: flex;\n  background: var(--input-background);\n  border-radius: var(--border-radius-input);\n  padding: 10px;\n  box-shadow: inset 0 2px 2px #0000001c; }\n  .style-module_input__3-5Pc input {\n    border: none;\n    width: 100%;\n    font-family: var(--txt-font);\n    background: var(--input-background);\n    padding: 0px; }\n    .style-module_input__3-5Pc input:focus {\n      outline: none; }\n  .style-module_input__3-5Pc .style-module_icon__1UUS9 {\n    padding-left: 5px;\n    color: var(--main-txt-color); }\n";
var style$2 = {"input":"style-module_input__3-5Pc","icon":"style-module_icon__1UUS9"};
styleInject(css_248z$2);
...

Answer 2

You should try styled-components if you want to use scss it makes easier to work with the components.