首页 > 其他 > 详细

react中设置短链接

时间:2020-02-14 10:36:32      阅读:93      评论:0      收藏:0      [点我收藏+]

原因
比如,我page要引入一个页面,那么引入起来就很麻烦。
图片在src\assets\img\login\bg.jpg
组件在src\pages\login\index.tsx
引入代码如下:

import React from ‘react‘;
import style from ‘./style.less‘;
import bg from ‘../../assets/img/login/bg.jpg‘;

const Login = () => {
  return (
    <div className={style.Login}>
      <img src={bg}></img>
    </div>
  );
}

export default Login;

 

设置短链接
其实这是利用webpack的功能alias。
运行npm run eject暴漏webpack的配置文件config/webpack.config.js
全局搜索alias: { 然后添加,如下配置:

alias: {
  ‘@assets‘:path.join(__dirname,‘..‘,‘src/assets‘)
   ...
},

 

新办法引入图片

import bg from ‘@assets/img/login/bg.jpg‘;

 或者在css中使用

 background-image: url("~@assets/img/login/bg.jpg");

 

 

 

background-imageurl("~@assets/img/login/bg.jpg");

react中设置短链接

原文:https://www.cnblogs.com/dshvv/p/12306008.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!