Trouble updating vue-loader

Hello, I am trying to update a rails 5.2 application that uses vue in the frontend from webpack 3 to webpack 4: the only issue remaining to complete the task is updating from vue-loader v14 to vue-loader v15.
With vue-loader v14 everything works correctly, when I try to use the v15 instead nothing works, it seems that the loader can’t differentiate the various part of a SFC so it treats the entire component file first as script, then as template and then as style, the errors emitted are A LOT and they are similar to this

Errors compiling template:

  Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Or this

Invalid CSS after "<": expected 1 selector or at-rule, was "<script>"

I have already read the migration guide and added the VueLoaderPlugin to the webpack plugins, the only “strange” thing that I have in my setup is that I have more entries declarred for vue because I need to inject different sass variables/mixins in various webpack entry points, so they looks like this

[
  {
    "key": "file",
    "value": {
      "test": "/(.jpg|.jpeg|.png|.gif|.tiff|.ico|.svg|.eot|.otf|.ttf|.woff|.woff2)$/i",
      "use": [
        {
          "loader": "file-loader",
          "options": {
            "context": "app/javascript"
          }
        }
      ]
    }
  },
  {
    "key": "css",
    "value": {
      "test": "/\\.(css)$/i",
      "use": [
        {
          "loader": "style-loader"
        },
        {
          "loader": "css-loader",
          "options": {
            "sourceMap": true,
            "importLoaders": 2,
            "modules": false
          }
        },
        {
          "loader": "postcss-loader",
          "options": {
            "config": {
              "path": "/Users/alberto/fandom-v5"
            },
            "sourceMap": true
          }
        }
      ],
      "sideEffects": true,
      "exclude": "/\\.module\\.[a-z]+$/"
    }
  },
  {
    "key": "sass",
    "value": {
      "test": "/\\.(scss|sass)(\\.erb)?$/i",
      "use": [
        {
          "loader": "style-loader"
        },
        {
          "loader": "css-loader",
          "options": {
            "sourceMap": true,
            "importLoaders": 2,
            "modules": false
          }
        },
        {
          "loader": "postcss-loader",
          "options": {
            "config": {
              "path": "/Users/alberto/fandom-v5"
            },
            "sourceMap": true
          }
        },
        {
          "loader": "sass-loader",
          "options": {
            "sourceMap": true
          }
        }
      ],
      "sideEffects": true,
      "exclude": "/\\.module\\.[a-z]+$/"
    }
  },
  {
    "key": "moduleCss",
    "value": {
      "test": "/\\.(css)$/i",
      "use": [
        {
          "loader": "style-loader"
        },
        {
          "loader": "css-loader",
          "options": {
            "sourceMap": true,
            "importLoaders": 2,
            "modules": {
              "localIdentName": "[name]__[local]___[hash:base64:5]"
            }
          }
        },
        {
          "loader": "postcss-loader",
          "options": {
            "config": {
              "path": "/Users/alberto/fandom-v5"
            },
            "sourceMap": true
          }
        }
      ],
      "sideEffects": false,
      "include": "/\\.module\\.[a-z]+$/"
    }
  },
  {
    "key": "moduleSass",
    "value": {
      "test": "/\\.(scss|sass)$/i",
      "use": [
        {
          "loader": "style-loader"
        },
        {
          "loader": "css-loader",
          "options": {
            "sourceMap": true,
            "importLoaders": 2,
            "modules": {
              "localIdentName": "[name]__[local]___[hash:base64:5]"
            }
          }
        },
        {
          "loader": "postcss-loader",
          "options": {
            "config": {
              "path": "/Users/alberto/fandom-v5"
            },
            "sourceMap": true
          }
        },
        {
          "loader": "sass-loader",
          "options": {
            "sourceMap": true
          }
        }
      ],
      "sideEffects": false,
      "include": "/\\.module\\.[a-z]+$/"
    }
  },
  {
    "key": "nodeModules",
    "value": {
      "test": "/\\.(js|mjs)$/",
      "include": "/node_modules/",
      "exclude": "/(?:@?babel(?:\\/|\\\\{1,2}|-).+)|regenerator-runtime|core-js|^webpack$|^webpack-assets-manifest$|^webpack-cli$|^webpack-sources$|^@rails\\/webpacker$/",
      "use": [
        {
          "loader": "babel-loader",
          "options": {
            "babelrc": false,
            "presets": [
              [
                "@babel/preset-env",
                {
                  "modules": false
                }
              ]
            ],
            "cacheDirectory": "tmp/cache/webpacker/babel-loader-node-modules",
            "cacheCompression": false,
            "compact": false,
            "sourceMaps": false
          }
        }
      ]
    }
  },
  {
    "key": "vue_main-site",
    "value": {
      "test": "/\\.vue(\\.erb)?$/",
      "use": [
        {
          "loader": "vue-loader",
          "options": {
            "loaders": {
              "scss": [
                "vue-style-loader",
                "css-loader",
                {
                  "loader": "sass-loader",
                  "options": {
                    "data": "\n     @import \"~src/stylesheets/variables.scss\";\n     @import \"~src/stylesheets/mixins.scss\";\n   "
                  }
                }
              ]
            }
          }
        }
      ],
      "issuer": {
        "include": "/main_application.js.erb/"
      }
    }
  },
  {
    "key": "vue_test",
    "value": {
      "test": "/\\.vue(\\.erb)?$/",
      "use": [
        {
          "loader": "vue-loader",
          "options": {
            "loaders": {
              "scss": [
                "vue-style-loader",
                "css-loader",
                {
                  "loader": "sass-loader",
                  "options": {
                    "data": "\n     @import \"sites/sites-base/test/javascript/src/stylesheets/test_variables.scss\";\n     @import \"~src/stylesheets/mixins.scss\";\n   "
                  }
                }
              ]
            }
          }
        }
      ],
      "issuer": {
        "include": "/test_application.js.erb/"
      }
    }
  },
  {
    "key": "vue_site-1",
    "value": {
      "test": "/\\.vue(\\.erb)?$/",
      "use": [
        {
          "loader": "vue-loader",
          "options": {
            "loaders": {
              "scss": [
                "vue-style-loader",
                "css-loader",
                {
                  "loader": "sass-loader",
                  "options": {
                    "data": "\n     @import \"sites/sites-base/site_1/javascript/src/stylesheets/site_1_variables.scss\";\n     @import \"~src/stylesheets/mixins.scss\";\n   "
                  }
                }
              ]
            }
          }
        }
      ],
      "issuer": {
        "include": "/site_1_application.js.erb/"
      }
    }
  },
  {
    "key": "svg",
    "value": {
      "test": "/\\.svg$/",
      "loader": "raw-loader"
    }
  },
  {
    "key": "erb",
    "value": {
      "test": "/\\.erb$/",
      "enforce": "pre",
      "exclude": "/node_modules/",
      "use": [
        {
          "loader": "rails-erb-loader",
          "options": {
            "runner": "bin/rails runner"
          }
        }
      ]
    }
  },
  {
    "key": "babel",
    "value": {
      "test": "/\\.(js|jsx|mjs)?(\\.erb)?$/",
      "use": [
        {
          "loader": "babel-loader"
        }
      ]
    }
  },
  {
    "key": "vue_admin",
    "value": {
      "test": "/\\.vue?$/",
      "use": [
        {
          "loader": "vue-loader",
          "options": {
            "loaders": {
              "scss": [
                "vue-style-loader",
                "css-loader",
                {
                  "loader": "sass-loader",
                  "options": {
                    "data": "@import \"~src/stylesheets/admin_variables.scss\";"
                  }
                }
              ]
            }
          }
        }
      ],
      "issuer": {
        "include": "/admin.*_application.js/"
      }
    }
  }
]

Any help will be apreciated, it is two days that I am trying to understand what is wrong :D.

Any tips :pray: ?

New year, new ideas maybe too :smiley: ?

So… maybe I finally understood the problem, in v14 sass-loader vas declared inside vue-loader, so doing this

{
  "module": {
    "rules": [
      {
        "key": "vue_main-site",
        "value": {
          "test": "/\\.vue(\\.erb)?$/",
          "use": [
            {
              "loader": "vue-loader",
              "options": {
                "loaders": {
                  "scss": [
                    "vue-style-loader",
                    "css-loader",
                    {
                      "loader": "sass-loader",
                      "options": {
                        "data": "\n     @import \"~src/stylesheets/variables.scss\";\n     @import \"~src/stylesheets/mixins.scss\";\n   "
                      }
                    }
                  ]
                }
              }
            }
          ],
          "issuer": {
            "include": "/main_application.js.erb/"
          }
        }
      },
      {
        "key": "vue_test",
        "value": {
          "test": "/\\.vue(\\.erb)?$/",
          "use": [
            {
              "loader": "vue-loader",
              "options": {
                "loaders": {
                  "scss": [
                    "vue-style-loader",
                    "css-loader",
                    {
                      "loader": "sass-loader",
                      "options": {
                        "data": "\n     @import \"sites/sites-base/test/javascript/src/stylesheets/test_variables.scss\";\n     @import \"~src/stylesheets/mixins.scss\";\n   "
                      }
                    }
                  ]
                }
              }
            }
          ],
          "issuer": {
            "include": "/test_application.js.erb/"
          }
        }
      },
      {
        "key": "vue_site-1",
        "value": {
          "test": "/\\.vue(\\.erb)?$/",
          "use": [
            {
              "loader": "vue-loader",
              "options": {
                "loaders": {
                  "scss": [
                    "vue-style-loader",
                    "css-loader",
                    {
                      "loader": "sass-loader",
                      "options": {
                        "data": "\n     @import \"sites/sites-base/site_1/javascript/src/stylesheets/site_1_variables.scss\";\n     @import \"~src/stylesheets/mixins.scss\";\n   "
                      }
                    }
                  ]
                }
              }
            }
          ],
          "issuer": {
            "include": "/site_1_application.js.erb/"
          }
        }
      }
    ]
  }
}

worked without problems because every issuer used his loader with his own configuration.
Vue-loader v15 instead ditches this internal loader and instead infer it from the top level sass-loader, so basically every entry is using the same config (without global variables) and everything breaks because the global imports are missing.
I have looked a little in the codebase of the loader and it seems that it isn’t possibile to specify custom options based on the issuer (I also tried to declare sass-loader mutliple times with specific options and issuer but sadly this aproach doesn’t work), also loaders like sass-resources-loader doesn’t seems to work in my particular case because the resources are loaded using webpack’s root as path base.
Any other option to provide global imports without refactoring our entire codebase?