Question

我正在使用Webpack将我的scss文件编译为css。 webpack.config文件如下。请注意，我使用我的主sass文件作为入口点。说实话，我不完全确定这些装载机是如何工作的，但是，目前它们确实如此：

module.exports = {
    entry: ['./scss/main.scss'],
    output: {
        path: __dirname + '/build/css',
        filename: '[name].css'
    },
    mode : 'production',
    watch: true,
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: '../css/'
                        }
                    },
                    {
                        loader: 'extract-loader',
                        options: {
                            publicPath: ''
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [require('autoprefixer')]
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },

}

我正在尝试合并一个系统，将main.scss样式表中引用的背景图像转换为base64字符串。我相信这应该可以使用文件加载器或url加载器，但我无法工作。还试过this无济于事。任何人都可以建议我如何能够实现这一目标吗？

Answer 1

好的，我已经使用postcss-loader的插件实现了这一点，即this one，如下所示：

const base64 = require('postcss-base64');

{
    loader: 'postcss-loader',
    options: {
        plugins: () => [
            require('autoprefixer'),
            require('postcss-minimize'),
            base64({
                extensions: ['.jpg', '.png']
            })
            // require('postcss-font-base64')
        ]
    }
},

完美无缺。

使用Webpack编译sass（仅限）并将引用的图像转换为base64

1 个答案: