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以要求node-sass-asset-functions。

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

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

1 个答案: