9

When using Webpack is pretty straight forward to add an alias for scss files in a Vue SFC, e.g:

<style lang="scss">
@import "~scss/config/config";
...
</style>

Would be the following in Webpack:

alias: {
  sass: path.resolve(__dirname, '../scss/')
}

How would you add the same kind of alias in Rollup via rollup-plugin-vue?

I've tried adding a number of postcss plugins, e.g

import importer from 'postcss-import';

vue({
    css: false,
    style: {
      postcssPlugins: [
        importer({
          path: null,
          addModulesDirectories: [path.resolve(__dirname, '../shared')]
        })
      ]
    }
  }),

I've also tried: rollup-plugin-alias, rollup-plugin-includepaths and some other postcss plugins.

Jamie Halvorson
  • 338
  • 3
  • 11
  • Did you figure this out? – M. A. Jan 28 '19 at 14:14
  • No unfortunately not, I've had to keep the full paths in place. If I ever do figure it out I'll try and remember to come back here and update the answer. – Jamie Halvorson Jan 28 '19 at 14:35
  • Ah, too bad. I have a similar problem, and I find this area of the vue plugin undocumented for the most part. Thanks for the reply. – M. A. Jan 29 '19 at 07:42

1 Answers1

5

I don't think you can use postcss plugins within the Vue plugin to accomplish this, because it compiles the scss before it gets passed to postcss. Using rollup-vue-plugin I've been able to use style.preprocessOptions.scss.includePaths to alias directories, in my case pointing to node_modules:

//rollup.config.js
import VuePlugin from 'rollup-plugin-vue'
...
plugins: [
  VuePlugin({
    style: {
      preprocessOptions: {
        scss: {
          includePaths: ['node_modules'],
      }
    }
  })
]
...

// some .vue file
<style>
  @import 'some-node-module' //resolves to 'node_modules/some-node-module'
</style
Zachary Crumbo
  • 51
  • 1
  • 3