vite项目引入全局css文件和@路径符的配置

css 中如何使用变量

1，自定义变量需要以--开头，
变量名称不能包含 $,[,^,(,%等字符，
普通字符局限在 “数字[0-9]” “字母[a-zA-Z]” “下划线_” 和 “短横线-”
2,value值不需要引号。JS动态设置的时候就需要引号。
3,自定义的全局变量要写在:root{ --comBg: #f1f;}下
4,使用变量的时候使用 color: var(--comBg);

.text-p{
  color: var(--comBg);
}

css变量值只能用作属性值，不能用作属性名

错误的的用法

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

css变量可以运用在切换主题上

JS动态设置css变量值

通过 element.style.setProperty('变量名', '变量值') 方法设置css变量。设置后元素的样式会自动更新样式

btn1.addEventListener('click', () => {
    box.style.setProperty('--theme', '#000');
})

参考文档：https://www.cnblogs.com/IwishIcould/p/16456017.html

main文件引入全局css文件和全局样式变量

src\style\common.css 文件

:root {
  /* css变量的自定义变量是有要求的,需要以--开头。value值不需要引号。自定义属性要写在root下 */
  --main: pink;
  --comBg: #f1f;
}
.a{
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
.a:hover {
  color: #535bf2;
}

src\main.js 文件

import { createApp } from 'vue'
// 引入全局css。全局css变量。可以在整个项目中使用，你项目需要配置 @ 别名
import '@/style/common.css'
import router from './router/index'
import App from './App.vue'
createApp(App).use(router).mount('#app')

如何配置 @ 别名

如果你的项目没有配置依赖，那么
import '@/style/common.css'将会报错。
第一步: 下载依赖

npm install @types/node --save-dev   我使用的是这个库
cnpm install @types/node --save-dev [仅在开发环境中使用] 
或者使用下面的而这个库
yarn add package-name --dev [仅在开发环境中使用]

第2步:配置vite.config.ts文件 如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置别名需要的路径模块
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置别名
  resolve: {
    alias: [
      {
        find: '@', //指向的是src目录
        replacement:resolve(__dirname,'src')
      }
    ]
  },
})

然后重新启动项目。就可以拉。
参考文档：https://www.cnblogs.com/IwishIcould/p/15861293.html