Unable to use CSS modules in CRA 2.0
up vote
1
down vote
favorite
React now supports CSS modules in CRA without ejecting. But I am still unable to use them.
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
My react-scripts version is also > 2.0
import React from "react";
import classes from "./Layout.module.css";
const Layout = props => {
return (
<React.Fragment>
<div>Toolbar, SideDrawer, Backdrop</div>
<main className={classes.Content}>{props.children}</main>
</React.Fragment>
);
};
export default Layout;
Layout.css
.Content {
margin: 10rem;
}
I am using them as mentioned here
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet.
This is the error I am getting:
./src/components/Layout/Layout.js
Module not found: Can't resolve './Layout.module.css' in '/home/tft/Desktop/My_Workspace/Reactjs-Projects/Personal Projects/burger-king/src/components/Layout'
javascript css reactjs css-modules react-css-modules
asked Nov 14 at 13:36
kamal11
130211
add a comment |
up vote
1
down vote
favorite
React now supports CSS modules in CRA without ejecting. But I am still unable to use them.
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
My react-scripts version is also > 2.0
import React from "react";
import classes from "./Layout.module.css";
const Layout = props => {
return (
<React.Fragment>
<div>Toolbar, SideDrawer, Backdrop</div>
<main className={classes.Content}>{props.children}</main>
</React.Fragment>
);
};
export default Layout;
Layout.css
.Content {
margin: 10rem;
}
I am using them as mentioned here
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet.
This is the error I am getting:
./src/components/Layout/Layout.js
Module not found: Can't resolve './Layout.module.css' in '/home/tft/Desktop/My_Workspace/Reactjs-Projects/Personal Projects/burger-king/src/components/Layout'
javascript css reactjs css-modules react-css-modules
asked Nov 14 at 13:36
kamal11
130211
Can you add yourLayout.module.cssand an example of the folder structure.
– ksav
Nov 14 at 13:57
added in the question
– kamal11
Nov 14 at 16:40
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
React now supports CSS modules in CRA without ejecting. But I am still unable to use them.
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
My react-scripts version is also > 2.0
import React from "react";
import classes from "./Layout.module.css";
const Layout = props => {
return (
<React.Fragment>
<div>Toolbar, SideDrawer, Backdrop</div>
<main className={classes.Content}>{props.children}</main>
</React.Fragment>
);
};
export default Layout;
Layout.css
.Content {
margin: 10rem;
}
I am using them as mentioned here
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet.
This is the error I am getting:
./src/components/Layout/Layout.js
Module not found: Can't resolve './Layout.module.css' in '/home/tft/Desktop/My_Workspace/Reactjs-Projects/Personal Projects/burger-king/src/components/Layout'
javascript css reactjs css-modules react-css-modules
asked Nov 14 at 13:36
kamal11
130211
React now supports CSS modules in CRA without ejecting. But I am still unable to use them.
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "2.1.1"
},
My react-scripts version is also > 2.0
import React from "react";
import classes from "./Layout.module.css";
const Layout = props => {
return (
<React.Fragment>
<div>Toolbar, SideDrawer, Backdrop</div>
<main className={classes.Content}>{props.children}</main>
</React.Fragment>
);
};
export default Layout;
Layout.css
.Content {
margin: 10rem;
}
I am using them as mentioned here
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet.
This is the error I am getting:
./src/components/Layout/Layout.js
Module not found: Can't resolve './Layout.module.css' in '/home/tft/Desktop/My_Workspace/Reactjs-Projects/Personal Projects/burger-king/src/components/Layout'
javascript css reactjs css-modules react-css-modules
javascript css reactjs css-modules react-css-modules
asked Nov 14 at 13:36
kamal11
130211
asked Nov 14 at 13:36
kamal11
130211
edited Nov 14 at 16:40
asked Nov 14 at 13:36
kamal11
130211
asked Nov 14 at 13:36
kamal11
130211
asked Nov 14 at 13:36
kamal11
130211
130211
Can you add yourLayout.module.cssand an example of the folder structure.
– ksav
Nov 14 at 13:57
added in the question
– kamal11
Nov 14 at 16:40
add a comment |
Can you add yourLayout.module.cssand an example of the folder structure.
– ksav
Nov 14 at 13:57
added in the question
– kamal11
Nov 14 at 16:40
Can you add your
Layout.module.css and an example of the folder structure.– ksav
Nov 14 at 13:57
Can you add your
Layout.module.css and an example of the folder structure.– ksav
Nov 14 at 13:57
added in the question
– kamal11
Nov 14 at 16:40
added in the question
– kamal11
Nov 14 at 16:40
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
In your question you state that the css file is named Layout.css, but I think it should be Layout.module.css to work. Or you just forgot to name it properly in here?
answered yesterday
guille
111
New contributor
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
In your question you state that the css file is named Layout.css, but I think it should be Layout.module.css to work. Or you just forgot to name it properly in here?
answered yesterday
guille
111
New contributor
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
In your question you state that the css file is named Layout.css, but I think it should be Layout.module.css to work. Or you just forgot to name it properly in here?
answered yesterday
guille
111
New contributor
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
up vote
1
down vote
In your question you state that the css file is named Layout.css, but I think it should be Layout.module.css to work. Or you just forgot to name it properly in here?
answered yesterday
guille
111
New contributor
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
In your question you state that the css file is named Layout.css, but I think it should be Layout.module.css to work. Or you just forgot to name it properly in here?
answered yesterday
guille
111
New contributor
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered yesterday
guille
111
New contributor
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered yesterday
guille
111
answered yesterday
guille
111
111
New contributor
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
guille is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301535%2funable-to-use-css-modules-in-cra-2-0%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you add your
Layout.module.cssand an example of the folder structure.– ksav
Nov 14 at 13:57
added in the question
– kamal11
Nov 14 at 16:40