使用 7-1 sass 架构创建 react 应用程序和节点 sass chokidar

Posted 2023-02-24

【中文标题】使用 7-1 sass 架构创建 react 应用程序和节点 sass chokidar

【英文标题】：create react app & node sass chokidar with 7-1 sass architecture

【发布时间】：2018-03-13 20:32:51

【问题描述】：

问题：react 的相对初学者，更愿意使用 create-react-app 而不弹出或配置 webpack，并希望实现 SASS，最好具有 7-1 文件夹结构。 我想要的是组件的独立样式表，但也有布局的全局样式表等。最重要的是，我希望有可以在所有组件中使用的 SASS 变量和 mixin。

我尝试过的： 1) Node-sass-chokidar（根据 github.facebookincubator/create-react-app 上的说明，将一些脚本添加到 package.json 以在您运行 npm start 时自动运行 css-watch。）

node-sass-chokidar在src目录下查找任意一个scss文件，编译成同目录下对应的css文件（即与scss文件相同）。

所以，我的 src 目录如下所示：

src
--components
----component-a.jsx
--stylesheets
----abstracts
------variables.scss
------variables.css
----components
------component-a.scss
------component-a.css
… (more 7-1 architecture folders, like base, vendors, etc.)
----main.scss

问题： 由于它会在每个 .scss 文件旁边创建一个 .css 文件，因此当我尝试将它们导入我的 main.scss 时，我收到一条错误消息，提示“不清楚要导入哪个文件。候选：component-a.scss、component-a.css。请删除或重命名这些文件中的一个以外的所有文件” 即使我可以成功地将部分导入到 main.scss 中，并且如果我将生成的编译后的 main.css 文件导入到 index.js 或类似的地方，我的组件仍然会直接从样式表/组件中的已编译 css 文件中读取它们的样式，所以他们没有从使用样式表/摘要/变量中的变量中受益，对吧？

顺便说一句，package.json 看起来像这样：

  "name": "s360new",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.1.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  ,
  "scripts": 
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  

【参考方案1】：

scss partials 的文件名必须以下划线开头 _ 如果您不希望它们编译为 css (related Q&A)

尝试在子目录中所有.scss 文件的名称前加上下划线_，并且只有main.scss 不带下划线。

/src
  /stylesheets
    /abstracts
      _variables.scss
    /components
      _component-a.scss
    main.scss

编辑：我不确定 react 组件将如何导入 scss，但如果他们直接导入它，那么您可能不需要将单个组件规则导入 main.scss。如果您需要在各个组件文件中使变量可用，您可以在需要单独编译的每个组件文件中使用@import "../abstracts/_variables.scss"; 从父目录导入。 Sass 变量在编译后的 css 中被剥离，所以如果你只是导入变量和 mixins 之类的东西，就不会有重复的样式规则。

在我看来与 7-1 架构一致的导入的一个潜在选择是在根目录 /stylesheet 中有一个 scss 部分，称为 _global-imports.scss，在这个文件中，你 @import all您希望在不同组件之间共享的变量文件等。然后你可以在每个组件文件中调用一个@import '../global-imports'，这样你就可以减少冗余并提高可维护性。

【参考方案2】：

我昨天发布了一个库。 如果您正在寻找可以在不弹出 create-react-app 的情况下更改配置的解决方案。 如果您正在寻找服务器端渲染支持， 如果您正在寻找汽车供应商 Dll 支持， 如果您正在寻找 Workbox 支持， 如果您正在寻找较少的支持， 如果您正在寻找 Sass 支持，

请结帐并给我一些反馈。 https://github.com/raymondsze/create-react-scripts

【讨论】：

未提供答案。