element-ui使用babel-plugin-component按需打包組件及官方自定義生成css主題

安裝babel-plugin-component

npm i -D babel-plugin-component

? babel-plugin-component 配置

  • 在babel.config.js plugins新增配置
plugins: [
  [
    'component',
    {
      libraryName: 'element-ui',
      // ~ + 自定義路徑
      styleLibraryName: '~src/assets/css/element-ui'
    }
  ]
]
  • 或者在.babelrc新增配置
"plugins": [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "~src/assets/css/element-ui"
    }
  ]
]

?? 解釋

  • 上面的libraryName屬性指定包名
  • styleLibraryName屬性
// babel-plugin-component 對(duì)styleLibraryName屬性的處理
if (!cachePath[libraryName]) {
  var themeName = styleLibraryName.replace(/^~/, '');
  cachePath[libraryName] = styleLibraryName.indexOf('~') === 0 ? resolve(process.cwd(), themeName) : "".concat(libraryName, "/").concat(libDir, "/").concat(themeName);
}

由此可以看出styleLibraryName支持自定義主題路徑, 前提是路徑前帶~符號(hào). 否則取

// element-ui/lib/theme-chalk
libraryName + '/lib' + styleLibraryName

???? 結(jié)論

當(dāng)需要babel-plugin-component插件按需加載自定義主題生成好的css文件時(shí)只需要通過(guò)styleLibraryName屬性~ + 路徑指定就可以了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容