how to import css properly

[elephamaximu]

I read official doc and
put
@import "mafs/index.css";

into index.css but

Failed to compile

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Can't resolve 'mafs/index.css' in '/Users/plato/dev/math_tutorial/vector_test/src'

How to import css?

[Steven Petryk]

To use the import "mafs/index.css" or @import "mafs/index.css" approaches, you need to be using tooling that resolves packages from node_modules (usually webpack, which ships with a lot of React-based tools).

If you're having trouble and just want to get things up and running, you can always try importing the CSS from unpkg:

@import "https://unpkg.com/mafs@0.5.0/build/index.css";

[Steven Petryk]

Oh actually, you know what—the docs are out of date. Try doing this instead:

@import "mafs/build/index.css"

[elephamaximu]

OK. path problem solved but
output was

./node_modules/mafs/build/index.mjs 535:23
Module parse failed: Unexpected token (535:23)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       opacity: opacity,
|       vectorEffect: "non-scaling-stroke",
>       ...(svgPathProps?.style || {})
|     }
|   });

should I configure webpack? or babel?

[Steven Petryk]

Hmm. This isn't an issue on your end—the final bundle shouldn't contain that syntax. Let me see if I can get this sorted for you shortly.

[Steven Petryk]

Go ahead and upgrade to v0.5.1. Should be fixed now :)

[elephamaximu]

Go ahead and upgrade to v0.5.1. Should be fixed now :)

first, thanks for your work!!

I updated package to v0.5.1 but there is another issue
I'm using node version 14 and create-react-app

Failed to compile
./node_modules/mafs/build/index.mjs
Can't import the named export 'Fragment' from non EcmaScript module (only default export is available)