Webpack Sass - cannot resolve images

Question

I am trying to compile my Sass via webpack. Compiling normal sass is fine but I get an error.

 Module not found: Error: Can't resolve '../img/twitter.svg' in '/Users/Steve/mywebsite/scss'
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./scss/main.scss 6:94501-94530

Is there a way to resolve this? Alternatively is there a way to set the level of the sass compiler to be less strict to just ignore certain errors

Below is my current config.

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  resolve: {
    alias: {
      masonry: "masonry-layout",
      isotope: "isotope-layout",
    },
  },

  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "./dist/dist2"),
    filename: "bundle.js",
  },

  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        include: path.join(__dirname, "/dist/img"),
        loader: "url-loader?limit=30000&name=images/[name].[ext]",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader?presets[]=es2015",
      },

      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ["css-loader", "sass-loader"],
        }),
      },

      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {},
          // other vue-loader options go here
        },
      },
    ],
  },

  plugins: [
    // new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("ross.css"),
  ],
};

Alexandretta

Answer 1

I know this is late, but for anyone looking for a workaround this error; In my case the image was loading perfectly in the template, however, Webpack was returning an error: Module not found: Error: Can't resolve './path/to/assets.png'

Fix/Workaround:

Add ?url=false to your css-loader, that will disable url handling by the css-loader :

...
{
  loader: "css-loader?url=false"
},
...

Kava

This solved my problem. I only build with webpack, not serve. I let the filesystem do the serving of static assets in most of my serverless projects. Thanks! – Hydrothermal

This isn't a fix, because the asset isn't build. Therefore you could end up with a compiled stylesheet containing paths to a non-existing location. – Explore

Or set the url options to false { loader: 'css-loader', options: { url: false } } – Darrel

Answer 2

I didn't have any luck with url-loader and file-loaderas suggested in the other answer. I was able to solve it using resolve-url-loader

module: {
  rules: [
    { // sass / scss loader for webpack
      test: /\.(sass|scss|svg|png|jpe?g)$/, //Make sure to allow all necessary file types here
      use: ExtractTextPlugin.extract({
        use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: "resolve-url-loader", //resolve-url-loader needs to come *BEFORE* sass-loader
              options: {
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            }
        ]
      })
    }
  ],
},

Helvetic

Thanks! Note: "Important! source-maps required for loaders preceding resolve-url-loader (regardless of devtool)." source: npm. Took me some time to figure out – Noctule

Answer 3

This is a breaking change in css-loader 4.x (according to css-loader issue 1136).

Sedgewake

Answer 4

You have not specified any loaders for images in your webpack file.

1. Install url-loader and file-loader to your package.json

via

npm install --save url-loader file-loader

2. Inside your webpack config file add following -

   {
           test    : /\.(png|jpg|svg)$/,
           include : path.join(__dirname, 'img'),
           loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
       }, // inline base64 URLs for <=30k images, direct URLs for the rest
   

Bandoleer

Thanks for the reply. Why do I have to load them? I don't intend to compress them or do anything else with them. It seems webpack is really just checking they exist? This may be useful in some circumstances but not all. Or have I got it wrong. – Alexandretta

You need the loaders for appropriate file types so that webpack can serve them as static asset when required in your code. In your case may be use of images as background-url or image in scss styles/ – Bandoleer

I have updated it, and the path is correct. Is it because of the relative path? – Alexandretta

Ok but "is it because of the relative path?" what are you referring to? – Bandoleer

Answer 5

I use this "Disable url resolving using the /* webpackIgnore: true */ comment"

https://webpack.js.org/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment

Guanabana

Answer 6

2023 - webpack (5.81.0)

I got the same error, using webpack (5.81.0) with css. After trying all the above answers with no success, I researched a little bit and got a better understanding of the issue.

The error usually happens when you use an image inside a css file, such as background-image:url(path/to/image).

In my case, I was using tailwind's bg-[url(path/to/image.jpg)] class, but the url was wrong relative to where it'll be loaded during a build.

So, the best way to think about it is: where will the image be used during a build? change the image url accordingly.

Coupe