Question

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

我尝试过的： 1）Node-sass-chokidar（根据github.facebookincubator / create-react-app上的说明，在运行npm start时，将一些脚本添加到package.json中以自动运行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。请删除或重命名除这些文件之外的所有文件“ 即使我可以成功地将partials导入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"
  }
}

Answer 1

scss部分的文件名必须以下划线_开头，如果您不希望它们编译为css（related Q&A）

尝试使用下划线.scss预先填充子目录中_个文件的所有名称，并且只有main.scss没有下划线。

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

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

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

Answer 2

我昨天已经出版了一个图书馆。如果您正在寻找可以在不弹出create-react-app的情况下改变配置的解决方案。如果您正在寻找服务器端渲染支持，如果您正在寻找Auto Vendor Dll支持，如果您正在寻找Workbox支持，如果您正在寻找更少的支持，如果您正在寻找Sass支持，

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

创建反应应用程序＆amp; node sass chokidar with 7-1 sass architecture

2 个答案: