W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
安裝
使用 Vue CLI 安裝。 (推薦使用 Vue CLI 4+)
vue add windicss
?? 此模塊是預(yù)發(fā)布版,請(qǐng)報(bào)告您發(fā)現(xiàn)的任何問(wèn)題。
然后,添加配置
?vue.config.js
?
module.exports = {
pluginOptions: {
windicss: {
// see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
},
},
}
最后,在您的條目中導(dǎo)入 windi.css
?main.js
?
import 'windi.css'
就是這樣!開(kāi)始在您的應(yīng)用中使用類實(shí)用程序或 CSS 指令,享受速度吧! ??
遷移
如果您之前使用過(guò) vue-cli-plugin-tailwind,請(qǐng)參閱有關(guān)遷移的文檔。
yarn remove vue-cli-plugin-tailwind
選項(xiàng)
export default {
scan: {
dirs: ['src'],
exclude: [
'node_modules',
'.git',
'public/**/*',
'*.template.html',
'index.html',
],
include: [],
},
transformCSS: 'pre',
}
有關(guān)配置參考,請(qǐng)參閱 options.ts。
例子
禁用預(yù)檢
?vue.config.js
?
module.exports = {
// ...
pluginOptions: {
windicss: {
preflight: false,
},
},
}
注意事項(xiàng)
具有作用域樣式的 ?@media
? 指令只能與 ?css
? ?postcss
? ?scss
? 一起使用,但不能與 ?sass
?、?less
? 或 ?stylus
? 一起使用
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: