3

If I use file loader things work just fine however we would not like to use file loader. Here is the problem:

Css/Sass Rule:

test: [/\.scss$/, /\.sass$/],
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2,
        },
      },
      {
        loader: 'postcss-loader',
        options: {}
      },
      {
        loader: 'sass-loader'
      },
    ],
  }),

Url-loader rule:

{
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  ]
}

In my sass file I have:

.test {
    background: url("/images/content-header-bg2.png");
  }

When I run webpack I get:

Module not found: Error: Can't resolve './users/content-header-bg2.png' in 'project/src/sass'
     @ ./node_modules/css-loader?{"importLoaders":2}!./node_modules/postcss-loader/lib?{}!./node_modules/sass-loader/lib/loader.js!./sass/global.scss

Is there something special you have to do in order to use url-loader with sass which is then compiled into css? Like I mentioned I don't want to have to use file-loader (which does work when I use it).

allencoded
  • 7,015
  • 17
  • 72
  • 126

0 Answers0