Cannot resolve module style-loader!css-loader despite already being installed
I'm trying to get css modules in place for my webpack/react development work.
Here is my current JS Code:
import styles from './App.css';
//inside a React render function
const classes=[styles.large,styles.red,styles.bold];
<p className={classes.join(' ')}>Something</p>
When I run the command ./node_modules/.bin/webpack I get the following error:
Module not found: Error: Can't resolve 'style-loader!css-loader' in '/srv/site/public'
I read online to install style-loader and css-loader via npm install style-loader css-loader --save but I already have them installed and they are listed on the devDependencies inside package.json
My versions:
style-loader : ^0.23.1
css-loader : ^2.1.0
react : ^16.6.3
webpack : ^3.12.0
npm : 6.5.0
node: 11.7.0
Here is my css portion of the modules area of webpack.config.js
{
test: /.css$/,
loader: 'style-loader!css-loader',
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
And here is my resolve portion of the webpack.config.js
resolve:{
extensions:['.js','.jsx','.css'],
modules:['node_modules']
},
I'm not quite sure what to do at this point.
javascript css webpack
asked Jan 20 at 7:04
jkushnerjkushner
2,593144192
add a comment |
I'm trying to get css modules in place for my webpack/react development work.
Here is my current JS Code:
import styles from './App.css';
//inside a React render function
const classes=[styles.large,styles.red,styles.bold];
<p className={classes.join(' ')}>Something</p>
When I run the command ./node_modules/.bin/webpack I get the following error:
Module not found: Error: Can't resolve 'style-loader!css-loader' in '/srv/site/public'
I read online to install style-loader and css-loader via npm install style-loader css-loader --save but I already have them installed and they are listed on the devDependencies inside package.json
My versions:
style-loader : ^0.23.1
css-loader : ^2.1.0
react : ^16.6.3
webpack : ^3.12.0
npm : 6.5.0
node: 11.7.0
Here is my css portion of the modules area of webpack.config.js
{
test: /.css$/,
loader: 'style-loader!css-loader',
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
And here is my resolve portion of the webpack.config.js
resolve:{
extensions:['.js','.jsx','.css'],
modules:['node_modules']
},
I'm not quite sure what to do at this point.
javascript css webpack
asked Jan 20 at 7:04
jkushnerjkushner
2,593144192
add a comment |
I'm trying to get css modules in place for my webpack/react development work.
Here is my current JS Code:
import styles from './App.css';
//inside a React render function
const classes=[styles.large,styles.red,styles.bold];
<p className={classes.join(' ')}>Something</p>
When I run the command ./node_modules/.bin/webpack I get the following error:
Module not found: Error: Can't resolve 'style-loader!css-loader' in '/srv/site/public'
I read online to install style-loader and css-loader via npm install style-loader css-loader --save but I already have them installed and they are listed on the devDependencies inside package.json
My versions:
style-loader : ^0.23.1
css-loader : ^2.1.0
react : ^16.6.3
webpack : ^3.12.0
npm : 6.5.0
node: 11.7.0
Here is my css portion of the modules area of webpack.config.js
{
test: /.css$/,
loader: 'style-loader!css-loader',
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
And here is my resolve portion of the webpack.config.js
resolve:{
extensions:['.js','.jsx','.css'],
modules:['node_modules']
},
I'm not quite sure what to do at this point.
javascript css webpack
asked Jan 20 at 7:04
jkushnerjkushner
2,593144192
I'm trying to get css modules in place for my webpack/react development work.
Here is my current JS Code:
import styles from './App.css';
//inside a React render function
const classes=[styles.large,styles.red,styles.bold];
<p className={classes.join(' ')}>Something</p>
When I run the command ./node_modules/.bin/webpack I get the following error:
Module not found: Error: Can't resolve 'style-loader!css-loader' in '/srv/site/public'
I read online to install style-loader and css-loader via npm install style-loader css-loader --save but I already have them installed and they are listed on the devDependencies inside package.json
My versions:
style-loader : ^0.23.1
css-loader : ^2.1.0
react : ^16.6.3
webpack : ^3.12.0
npm : 6.5.0
node: 11.7.0
Here is my css portion of the modules area of webpack.config.js
{
test: /.css$/,
loader: 'style-loader!css-loader',
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
And here is my resolve portion of the webpack.config.js
resolve:{
extensions:['.js','.jsx','.css'],
modules:['node_modules']
},
I'm not quite sure what to do at this point.
javascript css webpack
javascript css webpack
asked Jan 20 at 7:04
jkushnerjkushner
2,593144192
asked Jan 20 at 7:04
jkushnerjkushner
2,593144192
asked Jan 20 at 7:04
jkushnerjkushner
2,593144192
asked Jan 20 at 7:04
jkushnerjkushner
2,593144192
asked Jan 20 at 7:04
jkushnerjkushner
2,593144192
2,593144192
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
these are two different loaders, you need to run them one after the other, try this:
{
test: /.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
],
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
answered Jan 20 at 8:07
MoshezaurusMoshezaurus
808
works great. noted it only works on webpack version 4 or above. i had to upgrade my webpack.
– jkushner
Jan 21 at 1:58
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f54274314%2fcannot-resolve-module-style-loadercss-loader-despite-already-being-installed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
these are two different loaders, you need to run them one after the other, try this:
{
test: /.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
],
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
answered Jan 20 at 8:07
MoshezaurusMoshezaurus
808
works great. noted it only works on webpack version 4 or above. i had to upgrade my webpack.
– jkushner
Jan 21 at 1:58
add a comment |
these are two different loaders, you need to run them one after the other, try this:
{
test: /.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
],
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
answered Jan 20 at 8:07
MoshezaurusMoshezaurus
808
works great. noted it only works on webpack version 4 or above. i had to upgrade my webpack.
– jkushner
Jan 21 at 1:58
add a comment |
these are two different loaders, you need to run them one after the other, try this:
{
test: /.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
],
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
answered Jan 20 at 8:07
MoshezaurusMoshezaurus
808
these are two different loaders, you need to run them one after the other, try this:
{
test: /.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
],
options:{
modules:true,
localIdentName:'[path][name]__[local]--[hash:base64:5]',
},
exclude: /node_modules/
}
answered Jan 20 at 8:07
MoshezaurusMoshezaurus
808
answered Jan 20 at 8:07
MoshezaurusMoshezaurus
808
answered Jan 20 at 8:07
MoshezaurusMoshezaurus
808
answered Jan 20 at 8:07
MoshezaurusMoshezaurus
808
808
works great. noted it only works on webpack version 4 or above. i had to upgrade my webpack.
– jkushner
Jan 21 at 1:58
add a comment |
works great. noted it only works on webpack version 4 or above. i had to upgrade my webpack.
– jkushner
Jan 21 at 1:58
works great. noted it only works on webpack version 4 or above. i had to upgrade my webpack.
– jkushner
Jan 21 at 1:58
works great. noted it only works on webpack version 4 or above. i had to upgrade my webpack.
– jkushner
Jan 21 at 1:58
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.
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%2f54274314%2fcannot-resolve-module-style-loadercss-loader-despite-already-being-installed%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
