今天在写React 项目中写less样式的时候碰到一个问题。
是这样的: 我有四张背景图,四张背景图需要根据当前数据列表的下表来具体设置使用哪张背景图片 刚开始我直接在jsx文件中写的行内样式,根据当前遍历列表的下标引入不同的图片文件(图片文件是按照xxx01,xxx02,xxx03...的格式命名的);
但是,发到dev和sit环境时发现图片没有引用到,下载了测试环境的包下来,发现这几张背景图没有被打包进dist文件夹。同时观察项目中其他部分使用png图片的地方发现他们的目录是(/fund/...)引入的,于是去代码中搜索这个路径,结果在webpack配置中发现了,当遇到 .png|.jpg 等文件时,会把它打包进./fund/img/[name]hash 这样的包中,打包到这个文件夹可以理解,不理解的是为什么项目运行的时候,引入图片的路径也变成这个了呢,应该也是这个loader 做的处理,或者是 file-loader.也就是说,webpack 在解析到这些文件时会把他们打包并且改变引用为打包后的路径。这样就说通了。
{
test: /\.(gif|png|jpg)\??.*$/,
loader: 'url-loader',
options:{
name:'./fund/image/[name].[ext]?[hash]',
limit:3072
}
}
我试图找到一些资料或者文档来佐证我的猜测,可是。。。。公司的电脑访问不了github
继续解决上面的问题,知道了问题原因,就是路径的问题,那就把样式挪到less文件中,less文件中的图片是会被webpack打包的。 于是,可以在less中使用less 的循环语法生成多个名称相同下标不同的样式名称。然后再页面中需要为jsx 根据不同的index 添加这个样式名称,react 中给 className 指定多个样式名称,可以直接写成
<div className='a b'/>
这样div就有了 a b 两个样式,可是我这次的样式名称是动态的,需要根据下标来决定引入哪个样式,所以不能这样写。可以写为: 我这里是把样式文件当作变量直接引入进来的 import style from './style.less'
<div className={`${styles.content} ${style[`race0${index+2}`]}`}></div>
当对象的属性名称不确定时不能直接使用.操作符去调用这个属性,可以使用[]操作符把属性名求出
还可以使用classNames来写 当需要给className 赋值多个样式名称时,可以使用classnames 库
<div className={classNames{styles.content,styles[`race0${index+2}`]}}></div>
总之这里的关键就是这个不确定的属性名称需要使用[]来求取 ok,that's all~