sass content in .vue file not compiled

hi if there is sass content like below

then it complained

You may need an appropriate loader to handle this file type.

.babelrc is below

{ "presets": [ ["@babel/preset-env", { "modules": "commonjs", "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"], "node": "current" } }] ], "plugins": ["transform-vue-jsx"] }

part of package.json

"dependencies": { "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-syntax-json-strings": "^7.2.0", "@babel/plugin-syntax-jsx": "^7.2.0", "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0", "@vue/babel-plugin-transform-vue-jsx": "^1.0.0", "axios": "^0.18.0", "babel-helper-vue-jsx-merge-props": "^2.0.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-plugin-transform-vue-jsx": "github:vuejs/babel-plugin-transform-vue-jsx", "vue": "^2.6.10", "vue-router": "^3.0.2" }, "devDependencies": { "@babel/core": "^7.4.0", "@babel/preset-env": "^7.4.2", "@vue/test-utils": "^1.0.0-beta.29", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.1", "babel-jest": "^24.5.0", "babel-loader": "^8.0.5", "copy-webpack-plugin": "^5.0.2", "css-loader": "^2.1.1", "eslint": "^5.15.3", "eslint-config-standard": "^12.0.0", "eslint-loader": "^2.1.2", "eslint-plugin-import": "^2.16.0", "eslint-plugin-node": "^8.0.1", "eslint-plugin-promise": "^4.0.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^5.2.2", "html-webpack-plugin": "^3.2.0", "jest": "^24.5.0", "jest-serializer-vue": "^2.0.2", "mini-css-extract-plugin": "^0.5.0", "style-loader": "^0.23.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "uglify-es": "^3.3.9", "url-loader": "^1.1.2", "vue-jest": "^3.0.4", "vue-loader": "^15.7.0", "vue-server-renderer": "^2.6.10", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.10", "webpack": "^4.29.6", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.2.1", "webpack-merge": "^4.2.1" }

vuejs / babel-plugin-transform-vue-jsx

sass content in .vue file not compiled #179