Importing sass from node_modules with vue plugin

[larionov]

Hello! I'm trying to use vue plugin and importing sass from node_modules there with '~' syntax. It's important for me to use that syntax and not relative './node_modules/...' because the component is a part of the library and I want it to be importable as a .vue file (along with bili build).

<template>
  <a class="button is-primary">Button</a>
</template>

<script>
module.exports = {
  name: 'button-example',
};
</script>

<style lang="scss" scoped>
@import "~bulma/bulma";
</style>

When I'm running bili on that file I get the error:

⋊> ~/p/bili-sass-import-tilde-example npm run build                              12:51:03

> bili-sass-import-tilde-example@0.1.0 build /home/larionov/projects/bili-sass-import-tilde-example
> bili --plugins.vue --format=cjs,esm,umd --module-name=Example

error Failed to bundle src/index.js in cjs format

Stack Trace:
Error: Error: File to import not found or unreadable: ~bulma/bulma.
    at Promise.all.descriptor.styles.map (/home/larionov/projects/bili-sass-import-tilde-example/node_modules/rollup-plugin-vue/dist/rollup-plugin-vue.js:241:31)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bili-sass-import-tilde-example@0.1.0 build: `bili --plugins.vue --format=cjs,esm,umd --module-name=Example`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the bili-sass-import-tilde-example@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/larionov/.npm/_logs/2019-03-22T05_51_07_306Z-debug.log

Here is a minimal repository where the error can be reproduced: https://github.com/larionov/bili-vue-sass-import-tilde-example

[egoist]

<style lang="scss"> is handled by rollup-plugin-vue which compiles sass using @vue/component-compiler-utils which currently doesn't support the ~ alias. ~ only works in normal import style from './style.scss' because this is compiled by rollup-plugin-postcss.

Related: https://github.com/vuejs/component-compiler-utils/issues/49

[larionov]

Ok, that's unfortunate. Thank you!

[egoist]

You can use https://rollup-plugin-vue.vuejs.org/options.html#style-preprocessoptions to set sass options, ~ is implemented in rollup-plugin-postcss via the importer option: https://github.com/egoist/rollup-plugin-postcss/blob/e63c9ae659fe4e982fa8d31c955767c2a5e6e98f/src/sass-loader.js#L38

I'll try to make bili support this by default, not anytime soon though.

[larionov]

We went with magic-importer: bili.config.js

import path from 'path';
import magicImporter from 'node-sass-magic-importer';

const config = {
  plugins: {
    vue: {
      style: {
        preprocessOptions: {
          scss: {
            importer: magicImporter(),
          },
        },
      },
    },
  },
};

export default config;

[egoist]

That's awesome then 👌🏻