carbon-design-system / carbon-website

The website for the Carbon Design System.
https://www.carbondesignsystem.com
Apache License 2.0
283 stars 785 forks source link

Ambiguous instructions in https://www.carbondesignsystem.com/developing/react-tutorial/step-1/#import-carbon-component-styles #2535

Closed NohWayJose closed 3 years ago

NohWayJose commented 3 years ago

Ambiguous instructions in https://www.carbondesignsystem.com/developing/react-tutorial/step-1/#import-carbon-component-styles

Relevant information


I’m working through the Carbon-React tutorial. This step in Import carbon-component styles is an enigma:

“Re-compiling all of the Carbon Sass takes a while, even on fast systems. Let’s speed this up by moving our custom app Sass into a separate file, app.scss in the ‘src’ directory, and import that from App.js.”

src/App.js
import './app.scss';

Which file, in which directory is custom app Sass ? There is no app.scss in the src dir, so I believe I have to move the ambiguous custom app Sass file into the src dir, so that I can then add the import directive into src/App.js

The import is ./app.scss i.e. it is looking in THIS (src ) directory for a file called app.scss , which doesn’t exist. That’s the point I’m making. Where does it come from, so that I’m then able to MOVE IT. The instruction is:

“moving our custom app Sass into a separate file, app.scss in the ‘src’ directory”.

“MOVING”, implies there’s a file called app.scss already, that I need to move to the src dir but the instruction gives no hint where it currently is. I would edit the content source if I knew what the instructions should be.

NohWayJose commented 3 years ago

I have just tried creating a new app.scss in the src directory and will add the import directive to App.js, pointing to it. Fingers crossed. If this is what the instructions should say then perhaps the content can be updated thus:

“Re-compiling all of the Carbon Sass takes a while, even on fast systems. Let’s speed this up by creating a new blank .scss file, called app.scss in the src directory, and then edit the App.js file to import the new scss file.”

src/App.js
import './app.scss';