react中设置短链接

原因
比如,我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 (
    
); } 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中设置短链接)