Package documentation on npmjs.org: Clarify how to import the fiori-fundamentals SCSS file

When I use create-react-app to create a new React app - which is the way how apps are created in the React tutorial:

npx create-react-app my-app
cd my-app
npm start

and I install fundamentals-react according to its documentation on npmjs.com

npm install --save fiori-fundamentals # fiori-fundamentals@1.4.1
npm install --save fundamental-react # fundamental-react@0.0.14

and I include the Fiori Fundamentals CSS in my React application by including the following lines at the top of the file src/App.css as stated on the package page:

$fd-icons-path: "~fiori-fundamentals/scss/icons/";
$fd-fonts-path: "~fiori-fundamentals/scss/fonts/";
@import '../node_modules/fiori-fundamentals/scss/all.scss';

then I get an error in my browser (Chrome version 71.0):

I’m playing the React.js rookie by following the documentation, please excuse me if this issue is trivial to solve…

[CodesOfRa]

hi @nhebling ,

I did a very tiny sample app for fundamental-react : https://github.com/CodesOfRa/fundamental-react-demo

You can check this one until we fix the documentation.

Let me know if it helps.

[PierreFritsch]

It seems that mixing css and scss is not a good idea…

Renaming the file src/App.css to src/App.scss in the project generated by create-react-app did the trick for me.

I’d suggest to update the documentation on https://www.npmjs.com/package/fundamental-react so that other rookies won’t stumble here: Replace “In your App.css or App.scss file” with “In your App.scss file”.

By the way, shouldn’t the sentence below the code sample read “browse the components currently available with Fundamental React” instead of “Fundamental Vue”?