Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
LiTiang opened this issue Oct 24, 2016 · 6 comments
Closed

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

LiTiang opened this issue Oct 24, 2016 · 6 comments

Comments

@LiTiang
Copy link

LiTiang commented Oct 24, 2016

  • 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.
@Evlos
Copy link

Evlos commented Nov 4, 2016

+1

@k-schneider
Copy link

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

Source maps WERE working.

@Abhijith-Nagaraja
Copy link

Abhijith-Nagaraja commented Nov 15, 2016

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.

@luchillo17
Copy link

@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'),
            ],
          },
        },
      }),

@luchillo17
Copy link

luchillo17 commented Dec 23, 2016

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.

@debslab
Copy link

debslab commented Feb 7, 2017

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 : './' },
}
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants