1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Webpack CSS Problems Upgrading from 25.2.7 to 26.1.35

Webpack CSS Problems Upgrading from 25.2.7 to 26.1.35

Many years ago I was able to get webpack working with Syncfusion as per this thread:

https://www.syncfusion.com/forums/170595/ej2-webpack-styles

However, with upgrading from 25.2.7 to 26.1.35, the CSS imports are not working anymore.  The Bootstrap4 CSS code is not processed by Webpack.  

 FYI this is how my webpack.config.js looks:


const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

module.exports = (env, argv) => {

    return {
        entry: './index.js',
        mode: 'development',
        watch: true,
        devtool: false,
        output: {
            filename: '../static/analyticsApp/js/bundle.js',
            path: path.resolve(__dirname, ''),
        },

        module: {
            rules: [
                {
                    test: /\.(scss)$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                                sassOptions: {
                                    includePaths: ['./node_modules/@syncfusion/'],
                                },
                            },
                        },
                    ],
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                url: false,
                            },
                        },
                    ],
                },

                {
                    test: /\.html$/,
                    use: {
                        loader: 'html-loader',
                    },
                },

                {
                    test: /\.svg$/,
                    use: {
                        loader: 'svg-inline-loader',
                    },
                },
            ],
        },

        plugins: [
            new MiniCssExtractPlugin({
                filename: '../static/analyticsApp/css/bundle.css',
            }),
        ],
    };
};


And then in my main sass file:

@import "@syncfusion/ej2/bootstrap4";


Any assistance will be appreciated



3 Replies
DA Deepika Arumugasamy Syncfusion Team January 16, 2025 12:02 PM UTC

Hi Franco Mocke,


We apologize for the inconvenience.

We have validated the reported query. The issue is not related to the Syncfusion component package version. We recommend upgrading to our latest version (28.1.39) to access the most recent updates and features.

We suspect that the problem is caused by the latest version of the sass-loader. As a temporary workaround, you can try downgrading the sass-loader version.

We are currently validating compatibility with the latest sass-loader version and will provide an update within two business days.

 

Thank you for your patience, and please feel free to reach out if you have any further questions.



Regards,
Deepika 




CE ceds replied to Deepika Arumugasamy January 16, 2025 12:27 PM UTC

Hi Deepika,


I doubt it is the sass-loader as I did not upgrade the package.  If I upgrade Syncfusion to  26.1.35 the problem appears.  If I downgrade again to  25.2.7 the problem disappears.  I mentioned  26.1.35 as it is the first release where the problem starts.  Upgrading to the latest version has the same problem.

I have also bypassed sass by directly linking to the css and the problem stays.  Thus I don't think it is the sass loader.



DA Deepika Arumugasamy Syncfusion Team January 20, 2025 02:21 PM UTC

Hi Franco Mocke,

We understand that you are facing issues with CSS imports after upgrading from version 25.2.7 to 26.1.35.

To address this, we recommend upgrading to version 26.1.39 or the latest Syncfusion release (28.1.39). The latest versions include updates and improvements that may resolve the issue you're encountering with CSS processing.

If the problem persists even after upgrading, please share additional details, such as screenshots or specific error messages. This will help us investigate further and provide you with a precise solution.

Regards,
Deepika

 



Loader.
Up arrow icon