How to import assets files in react4xp project

Enonic version: 7.8.4
Enonic CLI version 2.3.0
OS: Windows 10 Pro

Hello,
I have a assets folder in ’src\main\resources\react4xp\assets\css\bootstrap.min.css’ direction. When I add import ‘./…/…/…/react4xp/assets/css/bootstrap.min.css’; to default.jsx, it has an error. If I add CDN link in default.es6 my problem will be solve but I need to import another files from assets. Could you help me please to fix the problem?

Thank you.

My problem solved. Thanks

Out of curiosity, how did you solve your problem?

I just ran instructions step by step from https://developer.enonic.com/docs/react4xp/master/imports-and-dependency-chunks

1 Like

If I want to add all extensions like images (jpeg | gif | png …) and (js) how can I do it? Could you put webpack code here please?
Thanks


const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

module.exports = function (env, config) {

// This makes 'npm link' symlinks in node_modules work:

config.resolve.symlinks = true;

// Compile .scss and friends:

config.module.rules = [

    ...(config.module.rules || []),

    {

        test: /\.((sa|sc|c))ss$/i,

        use: [

            MiniCssExtractPlugin.loader,

            {

                loader: 'css-loader',

                options: {

                    importLoaders: 1,

                    modules: { auto: true },

                }

            },

            {

                loader: 'sass-loader',

                options: {

                    sassOptions: {

                        outputStyle: 'compressed',

                    },

                },

            }

        ]

    },

    {

        test: /\.(svg|png|jpg|jpeg|gif)$/,

        use: {

            loader: 'file-loader',

            options: {

                name: '[path][name].[ext]',

                outputPath: 'path of output image directory'

            }

        }

    },

    {

        test: /\.?js$/,

        exclude: /(node_modules|bower_components)/,

        use: {

            loader: "babel-loader",

            options: {

                presets: ['@babel/preset-env', '@babel/preset-react'],

            }

        }

    },

];

// Set up how the compiled assets are exported:

config.plugins = [

    ...(config.plugins || []),

    new MiniCssExtractPlugin({

        filename: '[name].css',

        chunkFilename: '[id].[contenthash:9].css',

    }),

];

return config;

};

In terms of scss and css, there is an example here: (it’s with the new buildsystem though)

In terms of svg there is an example here:
https://github.com/enonic/site-market-react4xp/blob/master/webpack.config.react4xp.js

Have not tested with file loader yet.

1 Like

I haven’t either tested this with file/image loaders, I must admit. But the general idea is the same as in the scss-loader examples: if you add webpack rules to your custom webpack config (so the final webpack config is something that would work with vanilla webpack/npm etc), then react4xp should pick it up and detect the images as dependencies at build time, and serve them as assets the same way as other dependency assets at runtime. Although it may depend on how you want to use the images and loaders, I guess.

Thanks for replying, my main problem is identify in JS files in assets and images are not important for me now. I’ve used the same example but I didn’t get answer. Do I need to run npm after add the rules in webpack? If yes, what’s the npm command it?
Thanks a lot