【发布时间】：2021-08-14 00:28:23
【问题描述】：
我是一名 FE 开发人员，刚刚继承了一个非常大的 ReactJS/Gatsby 项目，该项目在 ./src/scss/ 中有以下文件
_base.fonts.scss
_base.forms.scss
_base.headings.scss
_base.links.scss
_base.lists.scss
_base.main.scss
_base.media.scss
_base.tables.scss
_base.text.scss
_generic.reset.scss
_layout.grids.scss
_layout.wrappers.scss
_modifier.animations.scss
_modifier.colors.scss
_modifier.display.scss
_modifier.spacing.scss
_module.article.scss
_module.footer.scss
_module.header.scss
_module.main.scss
_objects.blocks.scss
_objects.buttons.scss
_objects.cards.scss
_objects.forms.scss
_objects.icons.scss
_objects.images.scss
_objects.lists.scss
_objects.messaging.scss
_objects.navs.scss
_objects.search.scss
_objects.sections.scss
_objects.text.scss
_settings.variables.scss
_tools.include-media.scss
_tools.mixins.scss
_tools.mq-tests.scss
_tools.sg-updates.scss
_trumps.helper-classes.scss
_vendor.animate.scss
_vendor.modal-video.scss
_vendor.sal.scss
_vendor.slick.scss
main.scss
styleguide.min.scss
建造和维护这个项目的人今天被解雇了，这个项目被甩给了我。过去几年我一直在使用的 React 项目根本没有使用 SCSS，而且我几乎没有时间来增加它；我有几天后到期的维护票。
这是一个框架吗？如果是这样，我需要查找文档，以便快速跟上进度。
例如，我拥有的第一批票之一是将 <Section 的内容从 justify-content: center 更改为 justify-content: flex-start。很简单，但是对于所有这些课程，我想确保我正确地进行了更改，以免我搞砸了。
<Section className="c-hero__header c-hero__header--resources u-padding--quad--top u-space--quad--bottom u-padding--section u-box-shadow"> ... </Section>
编辑添加：这是 package.json 的依赖项：
"dependencies": {
"algoliasearch": "^4.9.1",
"animate.css": "^4.1.1",
"classnames": "^2.3.1",
"fs-readdir-recursive": "^1.1.0",
"gatsby": "^3.6.2",
"gatsby-image": "^3.6.0",
"gatsby-plugin-image": "^1.6.0",
"gatsby-plugin-manifest": "^3.6.0",
"gatsby-plugin-preact": "^5.7.0",
"gatsby-plugin-react-helmet": "^4.6.0",
"gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
"gatsby-plugin-sass": "^4.6.0",
"gatsby-plugin-sharp": "^3.6.0",
"gatsby-plugin-sitemap": "^4.2.0",
"gatsby-remark-images-contentful": "^4.3.0",
"gatsby-source-contentful": "^5.6.1",
"gatsby-transformer-remark": "^4.3.0",
"gatsby-transformer-sharp": "^3.6.0",
"gatsby-transformer-sqip": "^3.6.0",
"html-to-article-json": "^1.20.1",
"instantsearch.css": "^7.4.5",
"moment": "^2.29.1",
"node-sass": "^6.0.0",
"onscroll-effect": "^1.3.1",
"preact": "^10.5.13",
"preact-render-to-string": "^5.1.19",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-animate-on-scroll": "^2.1.5",
"react-cookie-banner": "^4.1.0",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-html-parser": "^2.0.2",
"react-inline-script": "^1.2.0",
"react-instantsearch-dom": "^6.11.0",
"react-lazysizes": "^1.0.0",
"react-load-script": "0.0.6",
"react-modal-video": "^1.2.7",
"react-plx": "^1.3.17",
"react-scroll": "^1.8.2",
"react-scroll-toggle": "^1.0.2",
"react-slick": "^0.28.1",
"react-structured-data": "0.0.14",
"react-text-loop": "^2.3.0",
"sal.js": "^0.8.5",
"universal-cookie": "^4.0.4"
}
如果有人可以给我指出一个框架，我可以做剩下的事情。谢谢！
【问题讨论】：
-
文件名开头的下划线表示它打算用作“部分”。因此，我相信所有这些文件都是在
main.scss中单独导入的。作为开发人员，通常的做法是为您认为以后可能会删除的内容创建单独的文件，因此您只需删除文件并删除它们的导入语句。这可能只是一种人类实践，而不是任何特定的框架结果。 -
是的，这些都是在
main.scss中导入的。这是main.scss的样子：/** * CONTENTS * * SETTINGS * Variables............Globally-available variables and config. * * TOOLS * Mixins...............Useful mixins. * Include Media........Sass library for writing CSS media queries. * Media Query Test.....Displays the current breakport you're in. ... /*------------------------------------*\ $GENERIC \*------------------------------------*/ @import 'generic.reset';在我看来，它不像我们以前的开发人员所做的那样。 -
我的迷你降价技巧失败了。我的观点是：
main.scss的结构非常细致，有大量评论部分CONTENTS带有子标题：SETTINGS、TOOLS、GENERIC等。在我看来，它不像我们以前的开发制作（他有点胡思乱想），这让我相信他使用一些预制框架或脚手架建造了这个网站。 -
@callan 这只是标准的 SCSS 实践。看起来根本没有生成。