VueJS webpack build error SCSS related - symfony

Question

I'm having errors when I try to build my VueJS project with the style sheets.
My error when I run "yarn run dev --watch" produces these errors:
c:\wamp\www\DBViewer2>yarn run dev --watch
yarn run v1.6.0
warning package.json: No license field
$ encore dev --progress=true --watch
Running webpack ...
0% compiling
Webpack is watching the files…
95% emitting ERROR Failed to compile with 1 errors 16:00:56
This dependency was not found:
* !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue in ./assets/App.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?sourceMap!../node_modules/vue-loader/lib/style-compiler/index?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":true}!scss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0!./A
I'm not sure what is causing this. It appears it is looking for the files in the wrong location?
Here is my App.vue file:
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss-loader">
/* Import Font Awesome Icons Set */
$fa-font-path: 'font-awesome/fonts/';
#import 'font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
$simple-line-font-path: 'simple-line-icons/fonts/';
#import 'simple-line-icons/scss/simple-line-icons.scss';
/* Import Bootstrap Vue Styles */
#import 'bootstrap-vue/dist/bootstrap-vue.css';
/*// Import Main styles for this application*/
#import './assets/scss/style';
</style>
Here is my webpack.config.js:
var Encore = require('#symfony/webpack-encore');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public_html/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/app.js and public/build/app.css
.addEntry('main', './assets/main.js')
.addEntry('vendor', './assets/js/vendor.js')
// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()
// enable source maps during development
.enableSourceMaps(!Encore.isProduction())
// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()
// show OS notifications when builds finish/fail
.enableBuildNotifications()
// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
.enableVueLoader()
// allow sass/scss files to be processed
.enableSassLoader()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();
Any suggestions is greatly appreciated. Have spent 2 days now trying different things and research on google. I'm just not familiar enough with symfony/encore and this is my first vuejs project.

Answer 1

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',
},
},