安裝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屬性~ + 路徑指定就可以了
