WebPack 2 nested SCSS

Question

I can't figure out why my nested SCSS code does not work.

Example of nested SCSS

.line {
  .right {
    top: 0;
    height: 100%;
    width: 20px;
  }
}

Webpack2 loader

exports.scss = {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader?modules&importLoader=2&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader' ]
}

If I write it like this then it works

.line.right {
  top: 0;
  height: 100%;
  width: 20px;
}

*I don't want to extract to another file for now.

Answer 1

What you are missing is the &

.line {
  &.right {
    top: 0;
    height: 100%;
    width: 20px;
  }
}