标签:less color Vite variable import font postcss css
支持css3 variables
src/styles/index.css
/* css3 variable */
:root{
--main-font-color: blue
}
#app{
font-size: 20px;
color: var(--main-font-color);
}
main.js
import { createApp } from 'vue'
import App from './App.vue'
import './styles/index.css'
createApp(App).mount('#app')
支持postcss
/* css3 variable */
:root{
--main-font-color: blue
}
#app{
font-size: 20px;
@console.log hello postcss;
color: var(--main-font-color);
}
"dependencies": {
"@postcss-plugins/console": "^0.2.4",
}
postcss.config.js
module.exports = {
plugins:[require('@postcss-plugins/console')]
}
css import
@import url(./other.css);
div{}
css-modules
定义 test.module.css
.moduleClass{
color: lightgreen;
}
使用
import { defineComponent } from "vue";
import classes from "@styles/test.module.css"
export default defineComponent({
setup() {
return () => <div className={`${classes.moduleClass}`}>vite app jsx</div>
}
})
css-processor scss/less
安装依赖
yarn add less
test.less
@bgColor:red;
.lessBox{
color: @bgColor;
}
App.jsx
import { defineComponent } from "vue";
import classes from "@styles/test.module.css"
import '@styles/test.less'
export default defineComponent({
setup() {
return () => <div className={`${classes.moduleClass}`}>vite app jsx <div className="lessBox">less box</div></div>
}
})
标签:less,color,Vite,variable,import,font,postcss,css 来源: https://www.cnblogs.com/ltfxy/p/16345257.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。