时间戳

首页 > 解决方案 > 通过 Rollup 在 Vue SFC 中使用 SCSS 别名

vue.js - 通过 Rollup 在 Vue SFC 中使用 SCSS 别名

问题描述

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

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

在 Webpack 中将如下所示：

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

您将如何在 Rollup via 中添加相同类型的别名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 插件。

标签： vue.jswebpackvuejs2rolluprollupjs

解决方案

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

推荐阅读