vue에 sass적용할 때 webpack설정 질문입니다

vue에 scss를 적용하는 법이 궁금해서 질문 올립니다.

공식문서를 보면 

npm install -D sass-loader node-sass를 한 후 

webpack config를 아래와 같이 설정하라고 되어 있던데 안되는 이유가 뭔지 잘 모르겠습니다. 제가 뭘 놓치고 있는 걸까요?

module: {

        rules: [{

            test: /\.vue$/,

            use: 'vue-loader',

        },  {

        test: /\.scss$/,

        use: [

          'vue-style-loader',

          'css-loader',

          'sass-loader'

        ]

      },           

        {

            test: /\.css$/,

            use: [

                'vue-style-loader',

                {

                    loader: 'css-loader',

                    options: {

                        esModule: false,

                    }

                },

            ]

        },

        ],

    },

<style scoped lang="scss">

.login {

    width: 235px;

  height: 60px;

   padding: 20px 91px 13px 87px;

  border-radius: 5px;

  background-color: #00c854;

    p{

        font-family: SpoqaHanSans;

    font-size: 22px;

    font-weight: bold;

    font-stretch: normal;

    font-style: normal;

    line-height: 1.14;

    letter-spacing: normal;

    text-align: left;

    color: #ffffff;

    }

}

</style>