How to properly include sass-loader in webpack?

Question

Sass

Registered in webpack loaders

{
    test: /\.scss$/,
    loader: 'style!css!sass',
  }

then I call
import styles from './header.scss';
header.scss myself

:local(.styles) {
  position: relative;

  padding: 50px 0;

  .tool {
    text-align: center;
    margin: 30px 0;

    img {
      width: 80%;
    }
  }
}

and throws an error

[1] SyntaxError: /home/max/projects/src/components/header.scss: Unexpected token (1:0)
[1] > 1 | :local(.styles) {
[1]     | ^
[1]   2 |   position: relative;
[1]   3 | 
[1]   4 |   padding: 50px 0;
[1]     at Parser.pp.raise (/home/max/projects/node_modules/babylon/index.js:1425:13)
[1]     at Parser.pp.unexpected (/home/max/projects/node_modules/babylon/index.js:2907:8)
[1]     at Parser.pp.parseExprAtom (/home/max/projects/node_modules/babylon/index.js:754:12)
[1]     at Parser.parseExprAtom (/home/max/projects/node_modules/babylon/index.js:4370:22)
[1]     at Parser.pp.parseExprSubscripts (/home/max/projects/node_modules/babylon/index.js:509:19)
[1]     at Parser.pp.parseMaybeUnary (/home/max/projects/node_modules/babylon/index.js:489:19)
[1]     at Parser.pp.parseExprOps (/home/max/projects/node_modules/babylon/index.js:420:19)
[1]     at Parser.pp.parseMaybeConditional (/home/max/projects/node_modules/babylon/index.js:402:19)
[1]     at Parser.pp.parseMaybeAssign (/home/max/projects/node_modules/babylon/index.js:365:19)
[1]     at Parser.pp.parseExpression (/home/max/projects/node_modules/babylon/index.js:329:19)

Answer 1

Why do you need :local? For local style scoping (css-modules) add

?modules&importLoaders=2&localIdentName=[name]__[local]___[hash:base64:5]

to your css-loader