gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 11:30:14 25 4
gpt4 key购买 nike

我是 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(如我添加的示例中)?,(我知道范围问题,我将自己手动管理类名)。
但是在构建包时将包保存到一个大的 CSS 文件中,就像 webpack 一样。
谢谢。

最佳答案

你快到了,你可以通过导入带有名称的 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);
...

关于reactjs - Next.js 与 SCSS 拆分为每个组件的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65026902/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com