Issue with webpack 2.2.1

I am using sass-loader with webpack 2.2.1 and have following error with this configuration:

webpack.config.js

  entry: {
      style: ['./admin/app.scss']
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: '[name].boundle.js',
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: '/\.scss$/',
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }

app.scss

$grid-gutter-width:      10px;
$font-path:              '../assets/fonts';
...

Error

ERROR in ./admin/app.scss
Module parse failed: /home/usr/Projects/anp/client/admin/app.scss Unexpected token (1:18)
You may need an appropriate loader to handle this file type.
| $grid-gutter-width:      10px;
| $font-path:              '../assets/fonts';

[wsfuller]

@jhnns Thanks for the response. I’m going to hop over to that other conversation you sent and read through the discussion.

I totally agree keep Webpack low level but adding in some type of command to add the desired modules so you can get going quickly. Would not like to see another Grunt Gulp battle ensue with Code over Configuration and everyone arguing back and forth. But, rather if you need to customize deeper you can, or from a very high level you can get your development environment running.

I’ll make a PR for the Extract Text Plugin so users hopefully aren’t running into the same issue I was.

[wsfuller]

@jhnns I understand fully that Webpack only understand JavaScript as well there needs to be a rule for Sass .scss files after going through a much better put together Introduction for v2.2.

The issue here is that on the Extract Text Webpack Plugin documentation following that guide only produced errors in Sass compilation explicitly at use: ['css-loader', 'sass-loader']

To understand more of the issue you can look at the exact setup I was working with Unable to parse Sass (.scss) #424

The solution was to replace use: ['css-loader', 'sass-loader'] (that’s written in the documentation) to use: "css-loader!sass-loader" that was found in the reference issue above.

In the end it feels like the Webpack documentation is still very confusing on getting setup. Most of the day was spent configuring and trying to get a development process in order as well jumping from Guides, Documentation, and Plugin pages working on piece by piece setup instead of some hand holding guide to get a new person up and running and then say “ok here’s a ton of advanced options to setup your specific environment for you specific needs”. I feel like a lot of people after reviewing my issues I was having yesterday may be feeling the same way.

IMO having a Guide to the tune of something like:

1. Webpack Installation
2. CSS loader installation
3. Optional Sass/Less loader installation + ExtractTextPlugin
4. JSX/Babel loader installation
5. HtmlWebpackPlugin installation
6. HMR replacement installation
7. Webpack Dev Server
8. Set your npm start script
9. Run your server have fun

that builds on itself, for me, that is all I need to get going just like using Grunt/Gulp from a starting standpoint. From there environment topics can be brought in and a myriad of other options can be opened up after having a working config. Again imo might make everything much more approachable and new people are following set standards in those Guides and getting everyone on the same page before opening the flood gates.