Why is rollup-plugin-sass not seeing imports using ~?

Question

I am trying to port the vue-material library to ESM so I can use it in a project. I am trying to use rollup with rollup-plugin-sass. I have the following rollup config...

import VuePlugin from 'rollup-plugin-vue';
import css from 'rollup-plugin-css-only';
import commonjs from 'rollup-plugin-commonjs';
import sass from 'rollup-plugin-sass';

// const external = Object.keys(pkg.dependencies);
const plugins = [
    commonjs(),
    VuePlugin(),
    sass(),
    css()
];
const globals = {
    vue: 'Vue'
};
module.exports = {
  plugins,
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'esm'
  }
};

However, when I build I get...

[!] (VuePlugin plugin) Error: Error: Can't find stylesheet to import. src/components/MdApp/MdApp.vue 131:9 root stylesheet

I check and line 131 is...

@import "~components/MdAnimation/variables.scss";

This file does seem to exist under the src/components folder but it isn't getting recognized. I also tried this...

sass({
  includePaths: [ 'src/' ],
  importer(path) {
    return { file: path[0] !== '~' ? path : path.slice(1) };
  }
}),

But I still get the same thing. How do I configure rollup-plugin-sass to use partial imports using ~?