While attempting to incorporate global SCSS variables into my Vue project, I came across a helpful example on how to Globally load SASS. Following the instructions, I created a vue.config.js file in the root directory of my Vue project. After copying and pasting the code into the file and adjusting the import path data, I encountered an error when trying to serve my project:
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'data'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate
To troubleshoot, I double-checked my package.json file to confirm the presence of the required dependencies - node-sass and sass-loader:
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-router": "^4.1.2",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
}
Despite having the necessary dependencies installed, I am still facing confusion regarding the issue. While I understand that it's possible to import the .scss variables individually into each Vue component where they're needed, I prefer a more efficient solution.
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/style/index.scss";
`
}
}
}
};
Directory structure