Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

External node module css load problem #381

Closed
sphingu opened this issue Aug 6, 2016 · 6 comments
Closed

External node module css load problem #381

sphingu opened this issue Aug 6, 2016 · 6 comments

Comments

@sphingu
Copy link

sphingu commented Aug 6, 2016

Getting error in every external module which import css internally.
Here, I am using react-flexbox-grid which import flexboxgrid.css from flexboxgrid module.

`Failed to compile.

Error in ./~/flexboxgrid/dist/flexboxgrid.css
Module parse failed: /media/sam/project/node_modules/flexboxgrid/dist/flexboxgrid.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
`

@gaearon
Copy link
Contributor

gaearon commented Aug 6, 2016

From their README:

You should configure webpack to load flexboxgrid with CSS Modules, otherwise components from react-flexbox-grid will just have empty class names.

We intentionally don’t support CSS Modules at this point. While this may change in the future, we don’t think it’s wise for generic libraries to force user to enable CSS Modules as it is a pretty opinionated way of doing CSS.

See also roylee0704/react-flexbox-grid#40 (comment).

@gaearon gaearon closed this as completed Aug 6, 2016
@sphingu
Copy link
Author

sphingu commented Aug 7, 2016

i might not get what you want to say by

We intentionally don’t support CSS Modules at this point

but it work fine if i import flexboxgrid.css from src/index.css.

@gaearon
Copy link
Contributor

gaearon commented Aug 7, 2016

Hmm, okay.

i might not get what you want to say by

We intentionally don’t support CSS Modules at this point

There is an extension to CSS called CSS Modules which we don’t support. However it seemed to me that react-flexbox-grid forces users to enable it:

You should configure webpack to load flexboxgrid with CSS Modules, otherwise components from react-flexbox-grid will just have empty class names

I don’t know if this is still true—glad you got it resolved.

@sphingu
Copy link
Author

sphingu commented Aug 7, 2016

I think, you might take me wrong.
After doing 'eject' on project, i found this code in webpack.config.dev.js

{
test: /.css$/,
include: [srcPath],
loader: 'style!css!postcss'
}

which means it uses CSS Module, but it include only srcPath in that.
after including nodeModulesPath, react-flexbox-grid works fine.

@gaearon
Copy link
Contributor

gaearon commented Aug 7, 2016

No, style!css!postcss does not mean support for CSS Modules. Only css?modules would enable them.

As for the code you’re referring to, it is from an old version on Create React App. Have you updated to 0.2.1? node_modules is included for CSS loader just fine there (but not CSS modules).

@sphingu
Copy link
Author

sphingu commented Aug 7, 2016

thanks for the explanation.
currently, I am using 0.1.0 version.

linhaobin pushed a commit to linhaobin/create-react-app-hb that referenced this issue Aug 30, 2018
(chore) tune up TypeScript compiler
@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants