Getting error in scss file when installing vuetify.js

Question

I have installed vuetify.js but it's giving me error in webpack configuration.

I have changed my webpack v4 configuration, also installed node-sass and sass-loader

Webpack.config.js

{
    test:  /\.(s*)css$/,
    loader:['style-loader', 'css-loader', 'sass-loader']
}

This is the error

ERROR in ./node_modules/vuetify/src/styles/main.sass 3:0 Module parse failed: Unexpected character '@' (3:0) You may need an appropriate loader to handle this file type. | // Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ |

@import './settings/_index' | @import './tools/_index' | @import './generic/_index' @ ./node_modules/vuetify/lib/framework.js 5:0-33 @ ./node_modules/vuetify/lib/index.js @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/header/Header.vue @ ./src/header/Header.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/app/App.vue @ ./src/app/App.vue @ ./src/index.js

how did you setup your project? Did you use the default vue webpack setup? — Simon Thiel
@SimonThiel No I haven't used the default vue webpack setup, although I externally made configurations in webpack, these configs works fine for css but not for scss — Adarsh
@SimonThiel No, I installed them but that didn't work for me — Adarsh

Simon Thiel Simon Thiel · Accepted Answer · 2019-09-25T15:48:40

I use the following installed the following dependencies and it works fine for me:

    "sass": "^1.22.9",
    "sass-loader": "^7.2.0",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vuetify-loader": "^1.3.0"

Getting error in scss file when installing vuetify.js

1 Answers