How to configure Vue with SCSS - vue.js

Question

The second I change
<style>
to
<style lang="scss">
I start getting errors in the terminal:
18% building modules 74/80 modules 6 active
...vue-router/src/components/Landing.vue(node:30664)
UnhandledPromiseRejectionWarning: TypeError [ERR_INVALID_ARG_TYPE]:
The "path" argument must be of type string. Received undefined
at validateString (internal/validators.js:121:11)
at Object.join (path.js:1039:7)
at getSassOptions (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/sass-loader/dist/utils.js:166:37)
at Object.loader (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/sass-loader/dist/index.js:43:55)
at LOADER_EXECUTION (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at Object.context.callback (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.module.exports (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/vue-loader/lib/selector.js:21:8)
at LOADER_EXECUTION (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
at runSyncOrAsync (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
at iterateNormalLoaders (/home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/loader-runner/lib/LoaderRunner.js:205:4
at /home/dan/working_files/agile/agile-admin-docker/frontend/vue-router/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14
(Use `node --trace-warnings ...` to show where the warning was
created) (node:30664) UnhandledPromiseRejectionWarning: Unhandled
promise rejection. This error originated either by throwing inside of
an async function without a catch block, or by rejecting a promise
which was not handled with .catch(). To terminate the node process on
unhandled promise rejection, use the CLI flag
`--unhandled-rejections=strict` (see
https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode).
(rejection id: 2) (node:30664) [DEP0018] DeprecationWarning: Unhandled
promise rejections are deprecated. In the future, promise rejections
that are not handled will terminate the Node.js process with a
non-zero exit code.
I believe I have installed the dependencies needed, it appear from the trace that sass-loader may be an issue here.
I installed sass using the command
npm install -D sass-loader#^10.1.1 node-sass
Any tips would be much appreciated, as really not sure what the issue could be at this point.
Landing.vue
<template>
<div>
<h1>Agile Admin App</h1>
</div>
</template>
<style lang="scss">
h1 {
border: 1px solid black;
}
</style>
I also figured my package.json file would be of use, as it may be a version issue for something like webpack or sass-loader
{
"name": "myapp",
"version": "1.0.0",
"description": "My App",
"author": "email#email.email",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.21.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^10.1.1",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

Answer 1

Did you followed this tutorial? https://vue-loader.vuejs.org/guide/pre-processors.html#sass
You may try
npm install -D sass-loader node-sass
Then, in your webpack config
module.exports = {
module: {
rules: [
// ... other rules omitted
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
// plugin omitted
}
This should do the trick.

Answer 2

Never got to the bottom of this sadly, even with the suggestions above. Ultimately someone at work suggested copying my custom code out, rebuilding the setup in the cli using vite, then reapplying my work. This appeared to fix the issue.
Doesn't really explain why it broke, but this was the fix in my case.