vite中css模块化以及支持less等预编译

• 配置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查看元素