CSS变量与JS共享: CSS Module的:export方法,功能上类似ES6的export关键字,即导出一个变量对象
首先定义一份sass文件如下:
$COMMON_ARROW_RIGHT: 'https://you.domain.com/123dfdds768fkasfhja3.png';
$INDEX_OLD: 'https://you.domain.com/s7812312312dsvasty8jkassd.png';
$MINE_USER_AVATAR: 'https://you.domain.com/79jksadsuek32423saasfh4.png';
//
:export {
COMMON_ARROW_RIGHT: $COMMON_ARROW_RIGHT;
INDEX_OLD: $INDEX_OLD;
MINE_USER_AVATAR: $SERVICE_WARNING;
}
然后定义cloud.js文件如下:
/**
* CDN,图片云,资源云,CSS-JS 变量共享
*/
import urls from './index.module.scss';
const clouds = {};
for(let i in urls) clouds[i] = urls[i].split('"')[1];
export default clouds;
CSS中使用
@import "~@cloud/index.module.scss";
.container {
position: relative;
width: 100%;
height: 100vh;
background: #f3f7f9 url($INDEX_OLD) top center no-repeat;
}
JS中使用:
JS中使用:
import Clouds from '@cloud/index';
const { MINE_USER_AVATAR } = Clouds;
// Render函数部分伪代码:
<Image className={'global-user-avatar'} src={MINE_USER_AVATAR} />