将SCSS拆分为每个组件的文件的Next.js
将SCSS拆分为每个组件的文件的Next.js
提问于 2020-11-26 17:38:27
我是Next.js的新手，经常使用(弹出)。
在创建-反应-应用程序的配置，我能够与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 = () => {
} 我读过以下文章：
NextJS component level SASS styling
但这些解决方案不符合我的需要。
我的问题：
有一种方法可以为每个组件编写本地SCSS文件，使用put CSS模块方法或<style jsx>方法，只需为每个组件导入SCSS (就像我添加的示例中那样)？(我知道范围问题，我将手动管理类名)。
，但是在构建包时，将包保留在一个大的CSS文件中，和webpack一样。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-02 09:38:04
您已经快到了，您可以通过导入带有名称的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>
} 然后，当您使用类型记录构建应用程序时，它会将所有样式都放在与您的逻辑相同的文件中，包括css。
从类型记录生成的应用程序示例
...
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);
...Stack Overflow用户
发布于 2021-04-02 09:37:40
您应该尝试使用styled-components，如果您想使用scss，那么使用组件就更容易了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65026902
复制相关文章
相似问题
腾讯云开发者
