开发总结—Webpack篇（分开加载less与css）

开发中，我所使用的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");

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