Include css with webpack using base64 encoding

Viewed 12

Hello I'm looking for a way of importing css using one of this statement:

• HTML Hyperlink:

<a href="data:text/css;base64,Ym9keSB7DQogIGNvbG9yOnJlZA0KfQ=="></a>

• HTML Style:

<style type="text/css">
  @import url("data:text/css;base64,Ym9keSB7DQogIGNvbG9yOnJlZA0KfQ==");
</style>

• HTML Stylesheet:

<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keSB7DQogIGNvbG9yOnJlZA0KfQ==" />

I have this webpack-config

const path = require('path');

const babelLoader = () => ({
    loader: 'babel-loader',
    options: {
      presets: [['@babel/preset-env', { targets: 'last 2 versions, ie >= 10' }]],
      plugins: [
        '@babel/plugin-transform-destructuring',
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-template-literals'
      ],
      babelrc: false
    }
});

module.exports = {
    entry: {
        main: ['./src/themes/default/assets/js/main.js']
    },
    module: {
        rules: [
            {
                // Transpile sources
                test: /\.es6$|\.js$/,
                exclude: [path.resolve(__dirname, 'node_modules')],
                use: [babelLoader()]
            },
            {
                test: /\.css$/,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
            },
        ]
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: 'window'
    }
};

Do you have any idea of how to configure webpack for this? Maybe url-loader? But idk :C

0 Answers
Related