[Vuejs]-VueJS webpack build error SCSS related

by

0👍

In order to be able to use SCSS in a Vue template, you need to declare in the single file component the following style block:

<!-- Those styles are not scoped to that particular component -->
<style lang="scss">...</style>
<!-- Or those styles are scoped to that particular component -->
<style lang="scss" scoped>...</style>

You can even use both in the same file, if needed.

You’ll also need to install the correct node dependencies by running:

npm install --dev node-sass sass-loader

This should then work out of the box when used in a project initialized with vue-cli.

However you could need to add this in your webpack ‘test’ configuration to make lang="scss" work in tests when using vue-loader’s ?inject option:

resolveLoader: {
    alias: {
        'scss-loader': 'sass-loader',
    },
},
👤Alex

Leave a comment