vue3.2+elementplus+typescript 实现自定义空间

427 阅读1分钟
//app.vue
<el-config-provider  namespace="ep">
</el-config-provider>
//style/element/index.scss
@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
  $namespace: "ep"
);
//vue.config.ts
css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: `@use "@/style/element/index.scss" as *;`,
      }
    }
  },

以上是按照element-plus文档中写的,但是并未如愿,通过查阅一些资料,在vue.config.ts中还需要配置以下内容才生效:

Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ],
      dts: 'src/components.d.ts',
    }),