开发总结—Webpack篇(分开加载less与css)

作者:杨润炜
日期:2015/12/9 14:25


开发中,我所使用的semantic-ui的样式总是会出现错乱,经审查元素才发现,css中的calc不生效,如

  1. width: calc("100% - 30px");

最后变成了

  1. width: 70px;

这显然是错误的。之后修改了webpack的配置才解决了此问题,下面是修改部分(完整配置的链接):

  1. // 因为less现存在数学运算的问题(如calc无法计算),所以将其与css分离
  2. { test: /\.less$/,
  3. loader: ExtractTextPlugin.extract(
  4. "style-loader",
  5. "css-loader!less-loader?sourceMap",
  6. {
  7. // 图片、字体资源打包到css上级目录
  8. publicPath: "../"
  9. }
  10. )
  11. },
  12. { test: /\.css$/,
  13. loader: ExtractTextPlugin.extract(
  14. "style-loader",
  15. "css-loader?sourceMap",
  16. {
  17. // 图片、字体资源打包到css上级目录
  18. publicPath: "../"
  19. }
  20. )
  21. },

在此webpack配置中,我把css与less的加载配置分开了,本来是可以写在一起的。为什么呢?

因为less中对calc这一css3样式的解析存在问题,可以在less官网中搜索calc找到此问题的说明。如果你的工程使用的第三方库或插件的css使用到calc,然后用less-loader来加载,则calc样式将无法生效。目前我使用的是less版本是v2.2.0。希望less之后的版本会解决此问题。

可能有人会问,如果想在less中使用calc,应该怎样弄?

百度知道上便有人回答了此提问。
即使用:

  1. width : calc(~"100% - 30px");

我亲测了一下,是正确的。

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/2.html
邮箱:glowrypauky@gmail.com
QQ: 892413924