1

I'm using bootstrap 3 with sass and it appears that I'm having an issue with the default number precision of 5. However, I can't find a way to increase this number precision. Here's my webpack configuration for the loaders.

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader']
}

The actual problem I'm having is with the alignment of an input group.

Input group 1 pixel off

As you can see above, it's 1 pixel off. When I edit the precision of the line height of the element in the chrome dev tools, it lines up perfectly. The problem also occurs in safari, but not in firefox.

1
  • What's your sass and what is it compiling to? If it's all Bootstrap, could you replicate using bootply.com or a codepen.io demo?
    – alexbea
    Nov 14, 2016 at 15:57

2 Answers 2

1

Webpack 2

Webpack 2 has changed how to declare loaders usage. Here is the new syntax:

use: [{
    loader: 'sass-loader',
    options: { ... },
}], 

This is the full configuration about SCSS files.

{
    test: /\.scss$/,
    use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'postcss-loader' },
        {
            loader: 'sass-loader',
            options: { precision: 8 },
        },
    ],
}

And this is the full configuration using ExtractTextPlugin:

{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        use: [
            { loader: 'css-loader' },
            { 
                loader: 'postcss-loader', 
                options: { precision: 8 },
            }
        ],
        fallback: 'style-loader',
    }),
}
0

The recommended way of doing this by defining a sassLoader property at the root level of your webpack config:

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

This doesn't appear to work in webpack 2, but it looks like you can pass options as query parameters:

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.