Sourcemap for Sass files

[hbweb]

Hello,

When developing our Angular application, I noticed that inspect elements on stylesheets does not tell you the .scss source file for css classes etc.

Just wonder where to enable it from webpack.config file please?

Cheers

[hbweb]

Any thought guys? Tks

[thekalinga]

Any luck with this?

[Foxandxss]

I have no idea on scss stuff. I want to investigate tho, but lately, not much time.

[strictd]

you may just put ?sourceMap on the end of your loaders..

https://github.com/jtangelder/sass-loader#source-maps

[hbweb]

I've tried that but project failed to compile. It halted when reached to 69%.

 {
        test: /\.(scss|sass)$/,
        exclude: root('src', 'app'),
        loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader', 'sass-loader?sourceMap']})
      },

[strictd]

i believe all the loaders in that chain need sourceMap

    {
        test: /\.(scss|sass)$/,
        exclude: root('src', 'app'),
        loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader?sourceMap', 'postcss-loader?sourceMap=inline', 'sass-loader?sourceMap']})
      },

[samfrach]

it's out of the scope, but since I meet someone who uses sass, I would like to ask you if you use the sass-resources-loader ?

I have a scss file for each of my component and this load avoids declaring imports in each file...

how do you do ?

[hbweb]

@strictd - I tried it but still hit the same problem. Server wont start and halt at 69%. Did it work on yours?

@samfrach - The way you do it, is perfectly fine. I have sass file in my components too so stylesheet should only include and loaded on particular page - it would help speed up the page load and easy to manage your code (modular approach). I also use sassLoader to include path of third party sass files

sassLoader: {
          //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
          includePaths: [
            path.resolve(__dirname, "node_modules/bootstrap-sass/assets/stylesheets"),
          ]
        },

[raphaelluchini]

Hello @hbweb and @Foxandxss

I've been researching a little bit more about how to use SASS with HMR. I read that's not recommended to use ExtractTextPlugin on develop mode. One of the reasons is that ExtractTextPlugin bypass HMR.

So the solution is to use webpack loaders for develop mode only.

Example:

{
        test: /\.(scss|sass)/,
        exclude: /node_modules/,
        loaders: !isProd ? ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap&sourceComments'] :
          ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [{loader: 'css-loader', options: {minimize: true}}, 'postcss-loader', 'sass-loader']
          })
      },

and don't forget to set a context and output

new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        output: {path: './'}
        }
    })

Also I don't need a condition in my new ExtractTextPlugin because it will just run on production mode

new ExtractTextPlugin({filename: 'css/[name].[hash].css'}),

I can open a PR later, it's a good improvement.

[digitalcraftco]

@raphaelluchini thanks for this. Everything works as expected with the source maps and app builds fine. The only issue I have is now background images no longer work. After looking into it, there are few known issue. https://github.com/webpack-contrib/style-loader/issues/55

Some have fixed this by adding an absolute for the publicPath. In context to this repo, any ideas on how we can fix this?

[hbweb]

@raphaelluchini fantastic mate. Glad you found a solution for this and it looks good to me. This is definitely a workaround as when doing a research I noticed that Angular actually commented out the sourcemap syntax.

BTW, includePaths for sassLoader is no longer exist in newer version >6.0.0 and it does not pick up from its options

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader",
                options: {
                    includePaths: ["node", "absolute/path/b"]
                }
            }]
        }]
    }
};

[Blazzze]

@digitalcraftco images really stopped working (when they are as a background property.... did you find any workaround ?