How to use node-sass-asset-functions in webpack?

Question

I would like to use the image-width function as part of a sass webpack setup. This function is defined in compass, but webpack's sass loader is based on node-sass and libsass and I don't want to use compass (because of ruby). node-sass-asset-functions contains the image-width function, but how to get it work in webpack?

One thing I tried in 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()
  }
},

another was setting the sassLoader includePaths to require node-sass-asset-functions.

bjnsn bjnsn · Accepted Answer · 2017-09-15T19:56:20

I'm using this setup and it seems to work properly:

{
    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')]
}

How to use node-sass-asset-functions in webpack?

1 Answers