Next.js 与 SCSS 拆分为每个组件的文件答案

【问题标题】：Next.js with SCSS split to files for each componentNext.js 与 SCSS 拆分为每个组件的文件
【发布时间】：2021-03-09 14:53:28
【问题描述】：

我是 Next.js 的新手，经常使用 create-react-app（已退出）。
通过 create-react-app 中的配置，我能够使用 SCSS，而不是使用 CSS 模块方法，而是使用拆分的 SCSS 文件。

例如：

ComponentA.jsx

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

const ComponentA = () => {
}

ComponentB.jsx

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

const ComponentB = () => {
}

我已阅读以下内容：
https://medium.com/@vladymyr.pylypchatin/the-simple-way-to-use-scoped-and-global-scss-with-next-js-67cdb2d0c676
NextJS component level SASS styling

但这些解决方案不符合我的需求。

我的问题：
有一种方法可以为每个组件编写本地 SCSS 文件，使用 put CSS-module 方法或<style jsx> 方法，只需为每个组件导入 SCSS（如我添加的示例中）？，（我知道范围问题，我会自己手动管理类名）。
但是在构建 bundle 时将 bundle 保存到一个大的 CSS 文件中， 就像 webpack 所做的那样。

谢谢。

【问题讨论】：

您能解释一下为什么您提到的解决方案不符合您的需求吗？

标签： reactjs sass next.js

【解决方案1】：

你快到了，你可以通过导入带有名称的 scss 文件来使用 css 模块。

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

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

和

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

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

然后，当您使用 typescript 构建应用程序时，它会将所有样式与您的逻辑放在同一个文件中，包括 css。

从 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);
...

【讨论】：

【解决方案2】：

如果您想使用 scss，您应该尝试styled-components，它可以更轻松地使用组件。

【讨论】：