Support resolve-url-loader, sass-loader?sourceMap

I'm submitting a ...
[ ] bug report
[ V ] feature request
[ V ] question about the decisions made in the repository
Do you want to request a feature or report a bug?
feature(but in the view of resolve-url-loader & sass-loader, it's a Bug)
What is the current behavior?
resolve-url-loader doesnt work in this version of this repo
also sass-loader doesnt work if use it with parameter 'sourceMap',
see below for more details
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
If i use this configuration ...

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['css-to-string-loader', 'css-loader', 'resolve-url', 'sass-loader']
}

I will get the ERROR : Cannot read property 'path' of undefined at Object.resolveUrlLoader

If i add ?sourceMap with sass-loader ...

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['css-to-string-loader', 'css-loader', 'resolve-url', 'sass-loader?sourceMap']
}

I will get the ERROR : path must be a string. Received undefined

What is the expected behavior?
it should be work ( like i use it in webpack 1 )
Please tell us about your environment:
same as latest verison of this repo
Browser: Chrome
Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
url(), @Import & nested resources are so frequently used in stylesheet, i think it will be great if support these functionality.

+1

Just bumped into this as well as I was working on upgrading from 5.0.5.

Source maps WERE working.

I finally found a way to fix this.

First of all. The problem why it was occurring was due to this line in the sassLoader

result.map.sources[0] = path.relative(self.options.context, resourcePath);

Here, the following object was always null.

self.opitons.context

Even if I passed the context in Webpack.common.config, it was still null.

So finally, correct way of doing is,

Add the following in the respective config files and not the webpack.common.config

new LoaderOptionsPlugin({
        debug: true,
        options: {
          context: __dirname,  
          output: { path :  './' },
          sassLoader: {
            includePaths: [path.resolve(__dirname, 'src', 'scss')]
          }
        }
      }),

Give output path as ./ not your actual output folder. I don't what is the reason. But that doesn't work.

@Abhijith-Nagaraja

@Abhijith-Nagaraja I'm having this issue, and even with the LoaderOptionsPlugin set i keep getting the same error.

Here's mine:

new LoaderOptionsPlugin({
        debug: true,
        options: {
          context: helpers.root('src'),
          outupt: {
            path: helpers.root('dist'),
          },
          sassLoader: {
            includePaths: [
              helpers.root('node_modules'),
              helpers.root('src'),
            ],
          },
        },
      }),

Damn typos, is output, not outupt, now the error says:

ERROR in ./~/css-loader!./~/resolve-url-loader!./~/sass-loader!./src/theme/app.core.scss
Module not found: Error: Can't resolve './images/ui-icons-light.png' in '/Users/aplicaciones2/Documents/Luchillo-tech-showcase/src/theme'
 @ ./~/css-loader!./~/resolve-url-loader!./~/sass-loader!./src/theme/app.core.scss 6:7400-7438 6:7724-7762

It seems i have misconfigured the resolve-url-loader or the file-loader for png's files when importing primeng.

Following worked for me..in webpack.dev.js I updated loader like following
{
test: /.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader", options: {
sourceMap: true
}
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}],
include: [helpers.root('src', 'styles')]
}

Then in same file, in LoaderOptionsPlugin I updated following
new LoaderOptionsPlugin({
debug: true,
options: {
context: __dirname,
output: { path : './' },
}
})

Navigation Menu

Repository navigation

Support resolve-url-loader, sass-loader?sourceMap #1124

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Support resolve-url-loader, sass-loader?sourceMap #1124

Description

Activity

Evlos commented on Nov 4, 2016

k-schneider commented on Nov 8, 2016

Abhijith-Nagaraja commented on Nov 15, 2016

luchillo17 commented on Dec 23, 2016

luchillo17 commented on Dec 23, 2016

debslab commented on Feb 7, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions