SCSS alias in Vue SFC via Rollup

SCSS alias in Vue SFC via Rollup

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/')
}

롤업에 동일한 종류의 별칭을 추가하는 방법은?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')]
        })
      ]
    }
  }),

나도 노력했어:rollup-plugin-alias,rollup-plugin-includepaths그리고 다른 postcss 플러그 인들도 있다.

나는 네가 사용할 수 없다고 생각한다.postcss이를 위해 Vue 플러그인 내의 플러그인은scss에 전해지기 전에postcss. 사용rollup-vue-plugin디렉토리 별칭에 사용할 수 있는 경우,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

ReferenceURL : https://stackoverflow.com/questions/53442900/scss-alias-in-vue-sfc-via-rollup