如何在webpack中使用node-sass-asset-functions？

Question

我想使用圖片寬度作爲sass webpack設置的一部分。這個函數是在羅盤中定義的，但是webpack的sass加載器是基於node-sass和libsass的，我不想使用指南針（因爲ruby）。 node-sass-asset-functions包含圖像寬度函數，但如何讓它在webpack中工作？

有一兩件事我想在webpack.config.js：

var assetFunctions = require('node-sass-asset-functions'); 
... 
module: { 
    loaders: [ 
    { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract("style-loader", ['css-loader?sourceMap', 'postcss-loader?sourceMap', 'resolve-url', 'sass-loader']) 
    }, 
... 
sassLoader: { 
    sourceMap: true, 
    options: { 
    functions: nodeSassAssetFunctions() 
    } 
}, 

另一個被設置sassLoader的includepaths要求節點薩斯 - 資產功能。

Answer 1

我使用這個設置，它似乎正常工作：

{ 
    module: { 
     rules: [ 
      { 
       test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: [ 
         { 
          loader: 'css-loader', 
          options: { 
           importLoaders: 1, 
           sourceMap: shouldMapSource 
          } 
         }, 
         { 
          loader: 'sass-loader', 
          options: { 
           importer: jsonImporter, 
           sourceMap: shouldMapSource, 
           functions: assetFunctions() 
          } 
         } 
        ] 
       }), 
       include: paths 
      } 
     ] 
    }, 
    plugins: [new ExtractTextPlugin('[name].[' + hashMethod + '].css')] 
}