Sass number precisionとwebpack

Question

私はsassを使ってブートストラップ3を使用していますが、デフォルトの精度である5という問題が発生しているようです。しかし、この精度を高める方法はありません。ローダー用のウェブパック設定は次のとおりです。

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

私が実際に抱えている問題は、入力グループの調整です。

は、あなたが上見ることができるように、それは1個のピクセルオフです。 chrome開発ツールの要素の行の高さの精度を編集すると、完全に整列します。問題は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'] 
    }) 
    } 
] 

Answer 2

WebPACKの2

WebPACKの2はHOを変更しました：クエリパラメータとしてwローダーの使用を宣言する。

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

これはSCSSファイルの完全な構成です。

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

そして、これはExtractTextPluginを使用して完全な設定です：

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