如何将Vite项目配置全局CSS和@路径符为？
摘要：css 中如何使用变量 1，自定义变量需要以--开头， 变量名称不能包含 $,[,^,(,%等字符， 普通字符局限在 “数字[0-9]” “字母[a-zA-Z]” “下划线_” 和 “短横线-” 2,value值不需要引号。JS动态设置的时
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