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

Posted 2023-03-06

【中文标题】Next.js 与 SCSS 拆分为每个组件的文件

【英文标题】：Next.js with SCSS split to files for each component

【发布时间】：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-67cdb2d0c676NextJS component level SASS styling

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

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

谢谢。

【问题讨论】：

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

【参考方案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，它可以更轻松地使用组件。