It doesn't seem to work at all with scss

[wujekbogdan]

I know that the title of this report sounds very generic, but this is exactly what happens - I can see no difference in the console output when the friendly-errors-webpack-plugin is enabled.

This is the output when the plugin is disabled:

And this is the output when the plugin is enabled:

So, as you can see, they look the same. Is it a bug, or is it my misunderstanding of what the plugin is supposed to do? Is it supposed to work with css/scss or just with JS?

Here's my webpack config:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: [
        './src/js/app.js',
        './src/scss/app.scss'
    ],
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/app.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader',
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                exclude: /(sprites|sprites@2x).png/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        context: './src/img/',
                        outputPath: 'img/',
                        publicPath: '../img/'
                    }
                },
                    {
                        loader: 'image-webpack-loader'
                    }
                ]
            },
            {
                test: /\.(eot|otf|ttf|woff)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        context: './src/font/',
                        outputPath: 'font/',
                        publicPath: '../font/'
                    }
                }]
            },
            {
                test: /(sprites|sprites@2x).png/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'img/',
                    publicPath: '../img/'
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader',
                        'resolve-url-loader',
                        'postcss-loader',
                        'sass-loader?sourceMap'
                    ]
                })
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        modules: [
            'node_modules',
            'temp' // spritesmith generated files
        ]
    },
    plugins: [
        new FriendlyErrorsWebpackPlugin(),
        new CopyWebpackPlugin([{
            context: './src/font/',
            from: '**/*',
            to: 'font/' // It's relative to ./dist
        }]),
        new ExtractTextPlugin('/css/app.css'),
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/img/sprites/'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'temp/sprites.png'),
                css: path.resolve(__dirname, 'temp/sprites.scss')
            },
            retina: '@2x',
            apiOptions: {
                cssImageRef: "~sprites.png"
            }
        })
    ],
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
};

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

And this is my package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "bootstrap": "4.0.0-alpha.6",
    "jquery": "^3.1.1",
    "lodash": "^4.17.4",
    "normalize.scss": "^0.1.0",
    "outdated-browser": "^1.0.2",
    "salvattore": "^1.0.9",
    "sassy-gridlover": "^4.0.0",
    "slick-carousel": "^1.6.0",
    "vue": "^2.2.2",
    "vue-router": "^2.3.0",
    "vue-template-compiler": "^2.2.2"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.9.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.2.3",
    "css-loader": "^0.27.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "image-webpack-loader": "^3.2.0",
    "node-sass": "^4.5.0",
    "object-fit-images": "^3.1.3",
    "path": "^0.12.7",
    "postcss-loader": "^1.3.3",
    "postcss-object-fit-images": "^1.1.2",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.13.2",
    "vinyl-fs": "^2.4.4",
    "vinyl-ftp": "^0.6.0",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.3",
    "webpack": "^2.2.1",
    "webpack-build-notifier": "^0.1.13",
    "webpack-dev-server": "^2.4.1",
    "webpack-spritesmith": "^0.3.3"
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --watch",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "deploy": "yarn run build && node deploy"
  },
  "browser": {
    "slick": "./node_modules/slick-carousel/slick/slick.js"
  },
  "browserify-shim": {
    "slick": {
      "exports": "null"
    }
  }
}

Is there anything else I can provide you with?

[geowarin]

Hello! I've never tested it with Scss. It should at least find scss errors and give them a 0 priority.

Do you have the "XX errors" header when enabling the plugin?

The best you can do in this situation is providing a test-case (think of it as a minimal repro) in the integration-test file.

It would help a great deal moving forward with your issue :smile:

[wujekbogdan]

Do you have the "XX errors" header when enabling the plugin?

Nope. There's no difference in the output at all.

The best you can do in this situation is providing a test-case

I'll try to prepare something. I'm not sure If I'm able to create an integration test... because I'm not sure what output am I expecting to see, but I'll create at least a repo that will help you to reproduce the issue (to make you see the same what I can see in my console). Does it work for you?

[geowarin]

A minimal repro would be great (ie, the minimal set of plugins, does it happen without the extract-text-plugin, etc.)

[geowarin]

Might be related to #38

[weilinzung]

Any updates on supporting a cleaner scss error?

[christophehurpeau]

@weilinzung Not that I am aware of, but I would be happy to review a PR :)

[weilinzung]

@christophehurpeau

89

[weilinzung]

@christophehurpeau #90 when could we have the new release?