Posted in Uncategorized

“Cannot resolve module” for CSS files

   February 23, 2021  11 Comments on “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.

Author: Fantashit

11 thoughts on ““Cannot resolve module” for CSS files”

  1. 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.

  3. 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.

  4. first step:
    npm install style-loader css-loader

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

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

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

  6. 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')
                ]
            },

  7. 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"

  8. 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.

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

Comments are closed.