import scss file within jsx file not working

[centinel3]

Hi there fourseven,

This plugin is great, though am having some issues with importing an accompanying scss file into my react jsx component. I dug through the issues log as well as google and can't seem to figure this out. Is there any way to import an scss file into a jsx file from the same directory?

file structure:

-imports
--features
---invite-form
----invite-form.jsx
----invite-form.scss

React component:

import React from 'react';
import './invite-form.scss';

const InviteForm = (props) => (

this is a form

);

export default InviteForm;

[idanwe]

@centinel3 did you find a solution?

[jmendiola222]

same issue here

[Floriferous]

This would be great to allow for better css code-splitting!

[nathanschwarz]

It works well for me.

I think your issue is not with importing the scss file, I struggled to understand why the app crashed when the scss file had the same filename as the .jsx file.

Make sure you import your JSX file with the .jsx extension when a scss file has the same filename in the directory; otherwise it will import randomly the scss file instead (because import is async).

do : import X from '/imports/..../X.jsx' instead of import X from '/imports/..../X'