配置vite.config的css预处理的选项! css:{preprocessorOptions: {scss: {additionalData:`@use "src/assets/style/globalColor.scss" as *;`} } } 可在任意scss文件中使用
一、安装依赖npm install -D sass sass-loader二、配置vite.config.tsexport default defineConfig({ plugins: [ vue(), ], css: { preprocessorOptions: { scss: { additionalData: '@import "@/styles/v…
exportdefaultdefineConfig({plugins:[vue()],css:{// css预处理器preprocessorOptions:{scss:{// 此处修改为要被预处理的scss文件地址additionalData:'@import "./src/index.scss";'}}}) 注意 在scss文件中的图片或者字体地址路径尽量使用绝对地址,不然文件可能会找不到。 7.vite配置rollup进行代码拆分 rollup官...
安装:pnpm i vite-plugin-compression -D 在vite.config.ts中进行配置: export default defineConfig({ plugins: [ // ... viteCompression({ verbose: true, // 是否在控制台输出压缩结果 disable: false, // 是否禁用 threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b algorithm: 'gzip', //...
配置package.json当前ip地址 package.json文件中,添加"dev":"vite --host", 配置package.json自动打开浏览器 {"name":"studyvite5","private":true,"version":"0.0.0","type":"module","scripts":{"dev":"vite --open","build":"vite build","preview":"vite preview"},"dependencies":{"vue":"^...
传递给 CSS 预处理器的配置选项,这些配置会传递到预处理器的执行参数中去。例如,在 scss 中定义一个全局变量: // vite.config.js import { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示: export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: `...
@import'@/assets/style/main.scss'; 但如果我们想要在每个页面中都可以使用,则需要在vite.config.ts中进行配置 代码语言:javascript 代码运行次数:0 运行 AI代码解释 exportdefaultdefineConfig({// ...css:{preprocessorOptions:{// 全局样式引入scss:{additionalData:`@use "./src/assets/style/main.scss" as...
{ scss: { additionalData: `@import "@/styles/index.scss";` } } } ...
2、配置项目基础通用样式 variables.module.scss集成通用样式 // base color $blue: #324157; $light-blue: #3A71A8; $red: #C03639; $pink: #E65D6E; $green: #30B08F; $tiffany: #4AB7BD; $yellow: #FEC171; $panGreen: #30B08F; // 默认菜单主题风格 $base-menu-color: #bfcbd9; $bas...