Sass数字精度和webpack

Question

我使用带有sass的bootstrap 3，似乎我遇到了默认数字精度为5的问题。但是，我无法找到提高此数字精度的方法。这是我的加载器的webpack配置。

npm install --global --production windows-build-tools

我遇到的实际问题是输入组的对齐。

正如您在上面所看到的，它关闭了1个像素。当我在chrome dev工具中编辑元素线高的精度时，它完美排列。问题也出现在safari中，但不是在Firefox中。

Answer 1

建议的方法是在webpack配置的根级别定义sassLoader属性：

module.exports = {
  ...
  sassLoader: {
    precision: 8  // Avoid rounding errors in bootstrap styles
  }
  ...
};

这似乎不适用于webpack 2，但看起来您可以将选项作为查询参数传递：

rules: [
  {
    test: /\.s?css$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: ['style-loader'],
      loader: ['css-loader?sourceMap', 'sass-loader?sourceMap&precision=8']
    })
  }
]