Vue3 vite element-plus sass 创建项目

最新推荐文章于 2024-09-28 19:02:04 发布

刘锋林

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量385

点赞数 9

分类专栏： vue3项目创建文章标签： sass 前端 css

本文链接：https://blog.csdn.net/weixin_44076777/article/details/135687273

版权

vue3项目创建专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. pnpm create vite project-name
2. pnpm i
3. pnpm add sass sass-loader -D
4. vite.config.js 文件添加属性,同时创建这个文件夹./src/styles/index.scss作为全局css样式

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/index.scss";`
      }
    }
  }
}）

5. pnpm add element-plus
6. pnpm add -D unplugin-vue-components unplugin-auto-import
7. vite.config.js 添加属性

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

最后vite.config.js 的内容是

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/index.scss";`
      }
    }
  }
})