The Vuetify documentation mentions the following:
After installation, you need to locate your webpack.config.js file and insert the provided code snippet into the rules array. If you already have a sass rule configured, you may need to make some adjustments. To use the vuetify-loader for treeshaking, ensure that your Webpack version is >=4. For more detailed instructions on setting it up with webpack, refer to the A-la-carte page.
// webpack.config.js
module.exports = {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
],
}
However, I don't have a webpack.config.js file in my project even though I used webpack to create it.
Can someone advise me on where to add this specified code?
Thanks!
Edit: I need to add the mentioned code because I'm facing an error:
webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined" found in ---> <VToolbar> <VCard> <StudentInfo> at src/components/StudentInfo.vue <App> at src/App.vue <Root>
I searched online and learned that this error is due to Vuetify not being installed correctly.
The v-toolbar is causing the issue. Removing it resolves the error.
I believe adding the specified code to webpack.congif.js might fix the error, as it's the only step from the Vuetify document that I haven't tried yet. Otherwise, I'm unsure how to resolve it...