29

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"),
  ],
};
kube
  • 13,176
  • 9
  • 34
  • 38
LeBlaireau
  • 17,133
  • 33
  • 112
  • 192

6 Answers6

39

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"
},
...
Community
  • 1
  • 1
Olamigoke Philip
  • 1,035
  • 8
  • 10
  • 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! – Akseli Palén Dec 20 '19 at 22:52
  • 1
    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. – Lars Dec 30 '20 at 15:43
  • 6
    Or set the url options to false `{ loader: 'css-loader', options: { url: false } }` – Seno Jun 27 '21 at 08:29
7

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
              }
            }
        ]
      })
    }
  ],
},
dave
  • 2,762
  • 1
  • 16
  • 32
  • Thanks! Note: "Important! source-maps required for loaders preceding resolve-url-loader (regardless of devtool)." [source: npm](https://www.npmjs.com/package/resolve-url-loader). Took me some time to figure out – Andreas Apr 29 '21 at 09:26
3

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

Marcel Studer
  • 581
  • 8
  • 9
0

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

  1. 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
WitVault
  • 23,445
  • 19
  • 103
  • 133
  • 2
    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. – LeBlaireau Mar 03 '17 at 10:28
  • 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/ – WitVault Mar 03 '17 at 10:46
  • I have updated it, and the path is correct. Is it because of the relative path? – LeBlaireau Mar 03 '17 at 11:07
  • Ok but "is it because of the relative path?" what are you referring to? – WitVault Mar 03 '17 at 11:49
0

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

Eric
  • 365
  • 3
  • 6
0

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.

Steven Armoo
  • 11
  • 2