-
配置vite.config.js文件,无需安装任何插件
-关于css的都在css模块下面进行配置import path from 'path' export default defineConfig({ css:{ //* css模块化 modules: { // css模块化 文件以.module.[css|less|scss]结尾 generateScopedName: '[name]__[local]___[hash:base64:5]', hashPrefix: 'prefix', }, //* 预编译支持less preprocessorOptions: { less: { // 支持内联 JavaScript javascriptEnabled: true, }, }, } })
-
注意!!! 样式文件名必须是XXX.module.css[less,scss,style]等,否则不生效的
-
运用
import styles from './index.module.less' function Test () { const [pageName, setPageName] = useState('') return ( <Container> <div> <p>测试页面</p> <p className={styles['test-p']}>firstName=== {pageName}</p> <ul className={styles['test-list']}> <li>苹果</li> <li>桃子</li> <li>栗子</li> </ul> </div> </Container> )
-
查看是否生效
*产物中查看代码分别对应css和js两个文件,以下则表示配置成功了
-
开发过程中可F12查看元素
vite中css模块化以及支持less等预编译
最新推荐文章于 2024-08-02 17:30:15 发布