首页 文章

使用7-1 sass架构创建react app＆node sass chokidar

提问于
浏览 次
2

问题：一个相对初学者要做出反应，谁更愿意使用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 . 请删除或重命名其中一个文件“即使我可以成功将部分导入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"
  }
}
javascript reactjs sass create-react-app node-sass

2 回答

  • -2

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

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

    回复于
  • 2

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

    尝试使用下划线 _ 在子目录中添加 .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' ，这样可以减少冗余并提高可维护性 .

    回复于

相关问题