I’m trying to upgrade Vuetify package to version 2.6.12 in my project Vuejs. Therefore, I’ve gotten error message when I run “npm run serve”
Error: Syntax Error: SassError: expected selector. ╷ 2 │ /deep/ #btn-acoes-t button:nth-child(3){ display: none !important;} │ ^ ╵ src\views\PerfilAnoLetivo.vue 2:1 root stylesheet
@ ./node_modules/vue-style-loader??ref–8-oneOf-1-0!./node_modules/css-loader??ref–8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref–8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref–8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PerfilAnoLetivo.vue?vue&type=style&index=0&id=33337f33&lang=scss&scoped=true& 4:14-467 15:3-20:5 16:22-475 @ ./src/views/PerfilAnoLetivo.vue?vue&type=style&index=0&id=33337f33&lang=scss&scoped=true& @ ./src/views/PerfilAnoLetivo.vue @ ./src/routes/gerencial.js @ ./src/routes/layout.js @ ./src/routes/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
package.json
{
"name": "educacaoapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lint-fix": "vue-cli-service lint --fix"
},
"dependencies": {
"animate.css": "^4.1.1",
"axios": "^1.1.3",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.7.3",
"eslint-config-standard": "^12.0.0",
"material-design-icons-iconfont": "^6.7.0",
"moment": "^2.29.4",
"pdfmake": "^0.2.6",
"vue": "^2.6.6",
"vue-chartjs": "^3.4.0",
"vue-debounce": "^4.0.0",
"vue-gravatar": "^1.4.1",
"vue-progressbar": "^0.7.5",
"vue-router": "^3.0.2",
"vue-the-mask": "^0.11.1",
"vue-tour": "^2.0.0",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.12",
"vuex": "^3.1.0",
"vuex-persistedstate": "^2.5.4"
},
"devDependencies": {
"@babel/preset-env": "^7.19.4",
"@mdi/font": "^7.0.96",
"@vue/cli-plugin-babel": "^3.4.0",
"@vue/cli-plugin-eslint": "^3.4.0",
"@vue/cli-service": "^3.4.0",
"@vue/eslint-config-airbnb": "^4.0.0",
"@vue/eslint-config-standard": "^3.0.5",
"babel-eslint": "^10.0.1",
"eslint": "^5.13.0",
"eslint-plugin-vue": "^5.2.1",
"vue-template-compiler": "^2.7.13",
"sass": "^1.56.0",
"sass-loader": "^10.1.1"
}
}
node version v14.20.1
npm version: 6.14.17
I tried remove node_modules && npm install
I tried remove node-sass package
I installed package sass-loader
Your selector should be written like this when using SASS
::v-deep #btn-acoes-t button:nth-child(3)
as explained here.