webpack: "Cannot resolve module" for CSS files

When I try to require CSS files, I get an error:

ERROR in ./src/client/scripts/display-test.js Module not found: Error: Cannot resolve module ‘style’ in C:\Users\u659408\localhost\bp\src\client\scripts @ ./src/client/scripts/display-test.js 3:12-60

It’s pointed to the correct file. I can tell because when I try to point it to a file that doesn’t exist, it gives a different error:

ERROR in ./src/client/scripts/display-test.js Module not found: Error: Cannot resolve ‘file’ or ‘directory’ …/…/styles/components/heading.css in C:\Users\u659408\localhost\bp\src\client\scripts @ ./src/client/scripts/display-test.js 3:12-58

I’m using gulp-webpack, so that might be the difference, but I don’t see why it would be for this error. The config being passed into it is super simple:

{
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.jsx?$/, loader: 'babel?stage=0', exclude: /node_modules/ },
    ]
  }
}

I tried using the normal require instead of ES2015 import. Nothing. I tried a whole ton of things and couldn’t find an answer. If you have any ideas, let me know. One of these days I’ll try without gulp-webpack, but that’ll be a little bit.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 1
Comments: 23 (1 by maintainers)

Commits related to this issue

code: publish to gh-pages branch - add loaders, *sigh* I guess webpack doesn't have these anymore. See https://github.com/webpack/webpack/issues/1470 — committed to DensityCo/charts by 1egoman 7 years ago
code: auto building of storybook (#15) * code: auto version detection of charts * code: chart version * code: deploy to gh-pages branch * code: publish to gh-pages branch - add loaders, *... — committed to DensityCo/charts by 1egoman 7 years ago
code: auto building of storybook (#15) * code: auto version detection of charts * code: chart version * code: deploy to gh-pages branch * code: publish to gh-pages branch - add loaders, *... — committed to orionstars2/react-chart by justinraydev 7 years ago

Most upvoted comments

According to the error message you shown:

Module not found: Error: Cannot resolve module 'style' in 
...
...

This points to the missed style-loader. Have you npm install --save-dev style-loader? If not, make sure to install the loader you required first.

+138

leftstick on Sep 24, 2015

npm install --save-dev style-loader and npm install --save-dev css-loader make it working for me. looks like these modules are no longer a part of standard bundle.

+55

msangel on May 18, 2016

first step: npm install style-loader css-loader

second: resolve: { extensions: ['', '.js', '.jsx','.css'],//add '.css' "root": __dirname }

+42

claudia1204 on Jul 18, 2016

2017/06/22 : My solution was this:

            // Process SASS/SCSS
            {
                test: /\.s[ac]ss$/,
                include: paths.appSrc,
                loaders: [
                    require.resolve('style-loader'),
                    require.resolve('css-loader'),
                    require.resolve('sass-loader')
                ]
            },

+36

rhaseven7h on Jun 23, 2017

For me I have to put this in my webpack.config.js

      { test: /\.css$/, loader: "style-loader!css-loader" }```

+30

Peakdrum on Dec 13, 2016

Oops! Thanks. I guess I just assumed the style- and css-loader came with webpack automatically.

+22

joezimjs on Sep 24, 2015

I solved my problem by changing css path like this: import css from "mycss.css" ==> import css from "./mycss.css"

+15

justtesti on Feb 27, 2018

After trying EVERYTHING i ended up just including these directly in one of the top most .jsx components (inserts as styles in DOM) :

import "!style-loader!css-loader!react-grid-layout/css/styles.css" import "!style-loader!css-loader!react-resizable/css/styles.css"

+13

lxm7 on Aug 8, 2017

For me this also works (typescript):

import './style.css';

+12

nokola on May 13, 2018

I’m having this problem. I have style-loader and css-loader installed. Funny thing is, I import several css files from some components that I’m using without a problem. Now I’m trying to import a .css file made by myself and I’m importing like this: import'../index.css'; then get this error: Module not found: Error: Can't resolve '../index.css'

Here is the relevant part of my webpack.config:

{
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
}

Any help would be much appreciated.

+12

arimourao on Oct 20, 2017

it is very simple you have to install the fist syle-loader the css-loader.

Vivekguptaji on Jun 3, 2020

For me this also works (typescript):
import './style.css';

Legend! Thank you for that. This is obvious to me now.

My index.js file required me to use import <VarName> from ‘…/style/css’.

Doh! Just worked out how to do it the other way too. I was right but had not gone far enough up in the directories.

DHBuild002 on Aug 19, 2019

@msangel It work for me!Thanks

wujunchuan on Jun 1, 2017