Question

在使用Webpack时，可以很直接地在Vue SFC中为scss文件添加别名，例如：

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

Webpack中将包含以下内容：

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

如何通过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插件。

Answer 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

通过汇总在Vue SFC中使用SCSS别名

1 个答案: