Importing css files from node modules in meteor

Question

I am using the froala editor in meteor and react. The froala editor requires you to import css files. https://www.froala.com/wysiwyg-editor/docs/framework-plugins/react When i import for example

import 'froala-editor/css/froala_style.min.css';

The server crashes and gives me an error

SyntaxError: Unexpected token .

It seems to be parsing the file as javascript. I am using meteor version 1.5.2. What is the correct way to import css files from node modules in meteor 1.5.2?

It's perfectly legit to import css files in react however it looks like import doesn't expect a minified file type - i.e. it expects path/filename.type not path/filename.something.type Try importing the un-minified file, it will get minified later in the build anyway. — Michel Floyd
– Michel Floyd, Commented Sep 7, 2017 at 20:45
i imported import 'font-awesome/css/font-awesome.css'; for example and it gave me the same error @MichelFloyd — jalen201
– jalen201, Commented Sep 7, 2017 at 20:49
Then the path might be the problem - import paths are relative to the file they are in. This path assumes your js file is at root which is unlikely. — Michel Floyd
– Michel Floyd, Commented Sep 7, 2017 at 20:59

Chase DeAnda · Accepted Answer · 2017-09-07 20:37:43Z

3

You can use the @import syntax in your main style sheet to import the css instead of doing it in the component.

answered Sep 7, 2017 at 20:37

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jalen201 Over a year ago

The froala editor requires me to import the CSS. In order to render the component properly, i have to import the CSS. froala.com/wysiwyg-editor/docs/framework-plugins/react

Chase DeAnda Over a year ago

Yes, but you don't have to import the css in the same file. You just need to make sure that the css gets imported before the component renders. By importing it in your main style sheet, you are importing it in with the rest of your apps css so it will be loaded by the time your component renders.

jalen201 Over a year ago

but is there a solution to this problem of importing css files from node modules in meteor rather than hacks around it?

Chase DeAnda Over a year ago

Yes, using @import in your stylesheet. It is not a hack lol sass-lang.com/guide

Chase DeAnda Over a year ago

stackoverflow.com/questions/42732832/…

Collectives™ on Stack Overflow

Importing css files from node modules in meteor

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related