Umi 支持 css 与 less,并支持在 js 与 css 中使用相对地址引入文件。
一、使用 CSS
Umi 中约定 src/global.css
为全局样式,会被自动引入到入口文件的最前面。
Umi 内置支持 less,不支持 sass 和 stylus。
二、使用图片
1. JS 中使用图片
// require 引用相对路径的图片
export default () => <img src={require('./foo.png')} />;
// 使用别名
export default () => <img src={require('@/foo.png')} />;
2. CSS 中使用图片
.logo {
background: url(./foo.png);
}
// 使用别名,需要在前面加 ~ 前缀
.logo1 {
background: url(~@/foo.png);
}
使用相对路径时,需要注意在发布时的 publicPath 的正确性。