项目中全局使用scss
第1步:安装 npm install sass --save npm install sass-loader --save-dev
第2步:vite.config.ts中配置
css: { // css预处理器 preprocessorOptions: { scss: { charset: false, //需要在assets下创建对应的文件global.scss additionalData: '@import "./src/assets/style/global.scss";', }, }, }
第3步:验证
//global.scss文件 $main:#ccc; $c:pink <template> <div class="home"> <h1 class="h1">全局使用scss</h1> </div> </template> <style lang="scss" scoped> .home{ height: 40px; //使用全局变量 background: $main; .h1{ color:$c } } </style>
使用Vant进行按需加载
第1步：下载ui库和按需引入的插件
个人不推荐使用这方式我推荐使用下面那一种方式。
因为这一种方式在build的时候，可能会报错哈。
npm i vant 下载ui库 npm install vite-plugin-imp -D 按需引入的插件
第2步：vite.config.js配置
import vitePluginImp from 'vite-plugin-imp' plugins: [ vue(), // 按需引入的插件 vitePluginImp({ libList: [ { libName: 'vant', style(name) { if (/CompWithoutStyleFile/i.test(name)) { return false } return `vant/es/${name}/style/index.js` } } ] }) ],
第3步，注册main.ts
// 引入组件 import { Button,Image as VanImage } from 'vant'; createApp(App).use(router).use(store).use(Button).use(VanImage).mount('#app')
第4步，使用
<template> <div class="home"> <van-button type="primary">主要按钮</van-button> <van-button type="success">成功按钮</van-button> <van-button type="default">默认按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" /> </div> </template>
按照官方的方式进行按需加载（推荐 build不会报错）
1.安装插件
通过 npm 安装
npm i vite-plugin-style-import -D
通过 yarn 安装
yarn add vite-plugin-style-import -D
第2步：vite.config.js配置
import styleImport from 'vite-plugin-style-import' styleImport({ libs: [ { libraryName: "vant", esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }),
3.注册组件 main.ts
import { Button,Image as VanImage } from 'vant'; createApp(App).use(router).use(store).use(Button).use(VanImage).mount('#app')
第4步，使用
<template> <div class="home"> <van-button type="primary">主要按钮</van-button> <van-button type="success">成功按钮</van-button> <van-button type="default">默认按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> <van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" /> </div> </template>
按需加载完成
尾声
如果你觉得我写的不错的话，可以给我推荐、打赏、评论!
上一个给我打赏的小伙伴都已经找到女朋友了!
咦!你不信，不信你给我打赏看一下!
保准你追到到喜欢的Ta!
你不会追，哎!难受。
我教你，你可以这样说:
小生不才，斗胆-问，不知姑娘是否心系他人。
感情之事，在下不敢儿戏!
如若姑娘早已心系他人。那在下便不再打扰。
如若有所唐突还望姑娘多加体谅!
若姑娘非我良人，那在下就不庸人自恼。
在下怕越陷越深，还望姑娘尽早告知!话已至此，我便先在此谢过!
拿去不谢!回头告诉我结果啊!
咦!抓住一个没有打赏的小伙伴!
