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

【问题标题】：How to use node-sass-asset-functions in webpack?如何在 webpack 中使用 node-sass-asset-functions？
【发布时间】：2017-03-28 11:49:54
【问题描述】：

我想使用 image-width 函数作为 sass webpack 设置的一部分。这个函数是在 compass 中定义的，但是 webpack 的 sass 加载器是基于 node-sass 和 libsass 的，我不想使用 compass（因为 ruby）。 node-sass-asset-functions 包含了 image-width 函数，但是如何让它在 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 设置为需要 node-sass-asset-functions。

【问题讨论】：

标签： javascript sass webpack

【解决方案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')]
}

【讨论】：