Vue CLI sourcemaps to style part of vue component file

So far I did not found solution - at least using Vue CLI.
But I have found workaround.

But first of all - whole problem is not about Vue CLI but it is something with vue-loader-plugin IMO. I think so because while using clean setup with vue and webpack I also see that problem.

I have found out that it is related to wrong sourcemap generated for those parts of Vue file and Source for those part is strip to only content of those tags. That is probably why browser could not map it to source. Also path to source file in sourcemap is wrong.

I have prepared additional loader for webpack which fixes those sourcemaps.
Check sm-fix-loader in repo below.
I dont know does it fix all issues, but at least in my cases it works awesome.

What works ok:
Build NODE_ENV=development webpack
SCSS inline (in vue file) and in separate file <style src="...">
TS / JS inline (in vue file) and in separate file <script src="...">

HRM NODE_ENV=development webpack-dev-server --hotOnly
SCSS inline (in vue file) and in separate file <style src="...">
It also reloads styles without reloading page itself :D
TS / JS inline (in vue file) and in separate file <script src="...">

Repo with working example:
https://github.com/l00k/starter-vue

Step by step solution:

1. Enable css sourcemaps in vue.config.js:

module.exports = {  css: {sourceMap: true},  

2. Move all scss from components to separate files, collate them in index.scss and import index.scss via App.vue. This will solve lots of problems with vue-css-sourcemaps (caused by Webpack, Devtools and vue-cli), and somewhat simplify your workflow. If you need scoping, scope manually via #selectors (Importing SCSS file in Vue SFC components without duplication with Webpack)

3. To go further, you may need to set up CSS extraction for node_modules only, as another mysterious bug ruins styling as soon as you touch any css in devtools:

devtool: 'cheap-source-map',    plugins: process.env.NODE_ENV === 'development' ?      ([new MiniCssExtractPlugin()]) : [],    module: {      rules: [            process.env.NODE_ENV === 'development' ?          (            {              // test: /node_modules/,              test: /node_modules\/.+\.scss/,              use: [                MiniCssExtractPlugin.loader,                {                  loader: 'css-loader',                  options: {                    importLoaders: 2,                    sourceMap: true                  }                },                {                  loader: 'postcss-loader',                  options: {                    plugins: () => [require('autoprefixer')],                    sourceMap: true                  }                },                {                  loader: 'sass-loader',                  options: {sourceMap: true}                }              ]            }) : {}      ],    }

If you extract all css, you'll loose hmr (hot module reloading = reload on edit), but since you don't really edit scss in your node_modules, you extact only them.

All in all, this fixed all vue css-related sourcemap issues with Devtools and enabled hot-editing right in browser.