vite中使用css的各种功能-优快云博客

本文链接：https://blog.youkuaiyun.com/bus_lupe/article/details/128886425

文章介绍了如何在Vite配置中使用@importalias来设置路径别名，以及结合Vue.js应用CSSModules和原生CSS变量。同时，讨论了使用Less预处理器和实现换肤功能的方法，包括媒体查询和根选择器(:root)的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生css variable

@import alias 使用路径别名

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@styles": "/src/styles"
    }
  }
})

main.js

import { createApp } from 'vue'
import '@styles/index.css'
import App from './App.jsx'

createApp(App).mount('#app')

css

@import url(@styles/theme.css);

css-modules

test.module.css

.moduleClass{
    color: red;
}

App.jsx

import { defineComponent } from "vue";
import classes from "@styles/test.module.css"

export default defineComponent({
    setup () {
        return () => {
            return <div class={`root ${classes.moduleClass}`}>hello, vite</div>
        }
    }
})

css pre-processors

yarn add less

换肤

:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
  
    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
  
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }


  @media (prefers-color-scheme: light) {
    :root {
      color: #213547;
      background-color: #ffffff;
    }
    a:hover {
      color: #747bff;
    }
    button {
      background-color: #f9f9f9;
    }
  }