通过 Rollup 在 Vue SFC 中使用 SCSS 别名

Posted 2023-02-19

【中文标题】通过 Rollup 在 Vue SFC 中使用 SCSS 别名

【英文标题】：SCSS alias in Vue SFC via Rollup

【发布时间】：2019-04-25 20:13:18

【问题描述】：

当使用 Webpack 时，为 Vue SFC 中的 scss 文件添加别名非常简单，例如：

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

在 Webpack 中应该如下：

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

如何通过rollup-plugin-vue 在 Rollup 中添加相同类型的别名？

我尝试添加一些 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 插件。

【问题讨论】：

你发现了吗？

不，不幸的是，我不得不保留完整的路径。如果我真的弄明白了，我会试着记住回到这里并更新答案。

啊，太糟糕了。我有一个类似的问题，我发现 vue 插件的这个区域大部分都没有记录。感谢您的回复。

【参考方案1】：

我认为您不能在 Vue 插件中使用 postcss 插件来完成此操作，因为它会在将 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

【讨论】：

大家好，这方面有进展吗？