create react app & node sass chokidar with 7-1 sass architecture

Question

Issue: a relative beginner to react, who would prefer to use create-react-app without ejecting or configuring webpack, and would like to implement SASS, preferably with a 7-1 folder structure. What I want is isolated stylesheets for the components, but also have global stylesheets for layout, etc. Most importantly, I want to have SASS variables and mixins that I can use in all my components.

What I’ve tried: 1) Node-sass-chokidar (with some scripts added to package.json to automatically run css-watch when you run npm start, as per instructions on github.facebookincubator/create-react-app.)

Node-sass-chokidar finds any scss file in the src directory and compiles it into a corresponding css file in the same directory (same as the scss file, that is).

So, my src directory looks like this:

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

Problems: Since it creates a .css file next to each .scss file, when i try to import them into my main.scss, i get an error saying “its not clear which file to import. Candidates: component-a.scss, component-a.css. Please delete or rename all but one of these files” Even if i could succesfully import the partials into main.scss, and if i imported the resulting compiled main.css file into index.js or somewhere like that, my components are still reading their styles directly from the compiled css files in stylesheets/components, so they’re not getting the benefit of using variables from stylesheets/abstracts/vars, right?

Btw, package.json looks like this:

{
  "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"
  }
}

miir · Answer 1 · 2017-10-03T19:35:15.120

The filenames of scss partials must start with an underscore _ if you don't want them to compile to css (related Q&A)

Try prepending all of the names of your .scss files in the subdirectories with an underscore _ and only have main.scss without an underscore.

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

Edit: I'm not sure about how the react components will import scss, but if they are importing it directly, then you may not need to import the individual component rules into main.scss. If you need to make variables available in the individual component files, you can import from parent directories with @import "../abstracts/_variables.scss"; in each of the component files that need to be compiled individually. Sass variables are stripped out in the compiled css, so there will be no repeated style rules if you are just importing things like variables and mixins.

One potential option for the imports that in my opinion would align with the 7-1 architecture is to have an scss partial in the root /stylesheet directory called something like _global-imports.scss and in this file, you @import all the variable files, etc. that you wish to share across the different components. Then you could call a single @import '../global-imports' in each of the component files, and in this way you can reduce redundancy and improve maintainability.

score -2 · Answer 2 · answered Oct 09 '17 at 03:27

I have published a library yesterday. If you are looking for solution that can alter the configuration without ejecting the create-react-app. If you are looking for Server Side Rendering Support, If you are looking for Auto Vendor Dll Support, If you are looking for Workbox Support, If you are looking for Less support, If you are looking for Sass support,

Please checkout and give me some feedback. https://github.com/raymondsze/create-react-scripts

create react app & node sass chokidar with 7-1 sass architecture

2 Answers2