Псевдоним SCSS в Vue SFC через Rollup - PullRequest
Новая
       64

Псевдоним SCSS в Vue SFC через Rollup

0 голосов
/ 23 ноября 2018

При использовании Webpack довольно просто добавить псевдоним для файлов scss в Vue SFC, например: 

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

В Webpack будет следующее: 

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

КакВы бы добавили такой же псевдоним в Rollup через rollup-plugin-vue?

Я пытался добавить несколько плагинов postcss, например, 

import importer from 'postcss-import';

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

Я также пробовал: rollup-plugin-alias, rollup-plugin-includepaths и некоторые другие плагины postcss.

1 Ответ

0 голосов
/ 12 июля 2019

Я не думаю, что вы можете использовать postcss плагины в плагине Vue для достижения этой цели, потому что он компилирует scss до того, как он будет передан postcss.Используя rollup-vue-plugin я смог использовать style.preprocessOptions.scss.includePaths для псевдонимов каталогов, в моем случае указывая на 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
...