Issue with SCSS loaders

[theCrius]

Description

I used the index.scss in /src importing other scss from ../node_modules/ without issue but today had to write some custom scss myself.

Apparently, no matter how simple I write it, i get and error about the symbol $ not being recognized.

Error Message & Stack Trace

[...]
[12:48:52] Starting 'serve'...
[12:48:52] Starting 'webpack:watch'...
[12:48:58] Time: 5497ms
       Asset     Size  Chunks  Chunk Names
    index.js  3.63 MB       0  main
index.js.map  4.34 MB       0  main

ERROR in ./~/css-loader?importLoaders=1!./~/sass-loader/lib/loader.js!./~/postcss-loader!./src/index.scss
Module build failed: Unknown word (20:11)

  18 |   @each $side in $sides {
  19 |     @if $side == '' {
> 20 |       .m#{$space} {
     |           ^
  21 |         margin: #{$space}px;
  22 |       }

 @ ./src/index.scss 4:14-173
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  3.14 kB       0
[12:48:58] Finished 'webpack:watch' after 5.59 s
[...]

Config

Copy the content from .yo-rc.json:

{
  "generator-fountain-angular1": {
    "version": "1.0.0",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "babel",
      "ci": "",
      "css": "scss",
      "resolved": "C:\\Users\\[myusername]\\AppData\\Roaming\\npm\\node_modules\\generator-fountain-webapp\\node_modules\\generator-fountain-angular1\\generators\\app\\index.js",
      "namespace": "fountain-angular1:app",
      "_": [],
      "sample": "todoMVC",
      "router": "uirouter"
    }
  }
}

Relevant Links

I don't have relevant links but I've a fix. In the ./conf/webpack.conf.js, this section:

{
        test: /\.(css|scss)$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader'
        ]
      },

The order is wrong. It should be:

{
        test: /\.(css|scss)$/,
        loaders: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },

Environment

Tell us which operating system you are using, as well as which versions of Node.js, npm, and yo. Run the following to get it quickly:

Node.js v9.3.0
win32 6.1.7601
yo 2.0.0
npm 5.6.0