loader work with webpack 2 ?

[delch]

Hello, I try to use resolve-url-loader with sass:

      {
        test: /\.sass$/,
        use: [
          'style',
          {
            loader: 'css',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          'resolve-url-loader',
          {
            loader: 'sass',
            options: {
              indentedSyntax: true
            }
          }
        ]
      }

Error:

Module not found: Error: Can't resolve

for each font and image, but with webpack 1 all work fine.

[bholloway]

Questions

• Do you have a source-map coming out of sass-loader? It is required
• Please state versions of all packages: resolve-url-loader, sass-loader, node-sass.
• Please post the full error (and the first few lines of stack trace) so that I can see what module cannot be resolved.

To try

• use the new debug option for resolve-url-loader and see what directories are being searched.
• temporarily move the assets so that resolve-url-loader is not needed, remove it and check that the loader chain works without it

nit: Always specify full loader name. Meaning style-loader not style. You can get nasty name conflicts between loaders and other packages.

[bholloway]

@delch any progress?

[gitby15]

hello, I had met the same problem using webpack2 with resolve-url-loader, i am using css-loader with options = {modules:true} this is my webpack configuration

use:[
          'style-loader',
          'resolve-url-loader',
          {
            loader:'css-loader',
            options:{
              modules:true,
              url:true,
              //localIdentName: '[path][name]__[local]--[hash:base64:5]'
              localIdentName: '[name]-[local]-[hash:base64:5]',
              importLoaders:2,
              root:'./'
            },
          },
          'autoprefixer-loader',
        ]

and this is my css file:

 background-image(logo.png)

I get "resolve-url-loader cannot operate: CSS error" and " Can't resolve 'logo.png'" while running webpack

it seem like the url() operation do not run my url-loader config

but if I changed my css code to "background-image: url(resolve-url-loader!./logo.png);"

it work, and my url-loader proceed. could you please help me ?thank you very much!

thanks for reading my terrible english~:D

[bholloway]

@gitby15 You should not need this loader if you are only using CSS, generally only SASS or LESS or similar CSS transpiler.

Webpack assets are relative to the imported file.

• Anything in a CSSurl() statement is fine.
• Anything in a SASS url() statement is fine, so long as that SASS file goes straight into webpack.

The problem comes when you have SASS importing SASS with url() statement. The asset is no-longer relative to the top SASS file.

If that is the case you need: first-to-last

• sass-loader (with sourcemaps)
• css-loader
• ...
• style-loader

[bholloway]

I'm going to close as I don't see any bug. We can always reopen.

@delch and @gitby15 please ask further questions here until you are happy.

Anyone else please open a new issue.

[gitby15]

ok, thank you very much:D

[vitkon]

still having an issue with

• webpack (v2.2.1)
• resolve-url-loader (v2.0.2)
• sass-loader (4.0.0) + sourceMap
• css-loader (0.26.0) with css modules enabled

[Malenconiaprincep]

I also met this problem， I use one css @import another css , but tell me Module not found: Error: Can't resolve 'resolve-url' in

my webpack config

module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['css', 'resolve-url']
        }),
      }
    ],
  },

  resolveLoader: {
   moduleExtensions: ["-loader"]
  },

test.css

@import './test1';

body {
  height: 100px
}

test1.css

.child {
  background: red
}

please help me thanks

[bholloway]

Never shorten loader names. use the loader suffix for the full name.

Do that first and eliminate that as a potential problem.

[larssn]

Any chance of an updated webpack 2 config example, on the front page?