开发中,我所使用的semantic-ui的样式总是会出现错乱,经审查元素才发现,css中的calc不生效,如
width: calc("100% - 30px");
最后变成了
width: 70px;
这显然是错误的。之后修改了webpack的配置才解决了此问题,下面是修改部分(完整配置的链接):
// 因为less现存在数学运算的问题(如calc无法计算),所以将其与css分离
{ test: /\.less$/,
loader: ExtractTextPlugin.extract(
"style-loader",
"css-loader!less-loader?sourceMap",
{
// 图片、字体资源打包到css上级目录
publicPath: "../"
}
)
},
{ test: /\.css$/,
loader: ExtractTextPlugin.extract(
"style-loader",
"css-loader?sourceMap",
{
// 图片、字体资源打包到css上级目录
publicPath: "../"
}
)
},
在此webpack配置中,我把css与less的加载配置分开了,本来是可以写在一起的。为什么呢?
因为less中对calc这一css3样式的解析存在问题,可以在less官网中搜索calc找到此问题的说明。如果你的工程使用的第三方库或插件的css使用到calc,然后用less-loader来加载,则calc样式将无法生效。目前我使用的是less版本是v2.2.0。希望less之后的版本会解决此问题。
可能有人会问,如果想在less中使用calc,应该怎样弄?
百度知道上便有人回答了此提问。
即使用:
width : calc(~"100% - 30px");
我亲测了一下,是正确的。
感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/2.html
邮箱:glowrypauky@gmail.com
QQ: 892413924