Scss import not working in react MFE

[sathishkumar555]

I am using the single spa react typescript SSR. For the CSS we were using styled components. Currently, we have a requirement that there are some third-party components that need to be integrated.

The issue with those components is the styling part which is using the SCSS import for their components. Attached is the screenshot.

So I need to set the support for SCSS in webpack file and I have added the configuration for the same but SCSS failed to run in server-side rendering and loaded on the client side, but my requirement is to run the SCSS imports from the server side. Below is the webpack file and

webpack.config.js

const webpackMerge = require('webpack-merge'); const singleSpaDefaults = require('./build-config/webpack/webpack-react-ts.config'); const path = require('path'); const EsmWebpackPlugin = require('@purtuga/esm-webpack-plugin'); const Dotenv = require('dotenv-webpack'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = webpackConfigEnv => { rules: [ { test: /.mjs$/, include: /node_modules/, type: 'javascript/auto' } ]; const defaultConfig = singleSpaDefaults({ orgName: 'bjs', projectName: 'static-micro-frontend', webpackConfigEnv });

const serverConfig = singleSpaDefaults({ orgName: 'bjs', projectName: 'static-micro-frontend', webpackConfigEnv });

defaultConfig.plugins = defaultConfig.plugins.filter( p => p.constructor.name !== 'CleanWebpackPlugin' ); serverConfig.plugins = serverConfig.plugins.filter( p => p.constructor.name !== 'CleanWebpackPlugin' );

const alias = { '@components': path.resolve(dirname, 'src/components'), '@assets': path.resolve(dirname, 'src/assets') };

return [ webpackMerge.smart(defaultConfig, { resolve: { alias }, optimization: { minimizer: [new UglifyJsPlugin()] }, devServer: { compress: true, port: 8085 } }), webpackMerge.smart(serverConfig, { // modify the webpack config however you'd like to by adding to this object target: 'node', mode: 'development', entry: path.resolve(process.cwd(), 'src/node-entry.tsx'), module: { rules:[{ test: /.(scss|sass)$/, use: [ MiniCssExtractPlugin.loader,

          "style-loader",
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('node-sass')
            }
          }
        ]
    }]
  },
  output: {
    library: 'mf',
    libraryTarget: 'var',
    filename: 'server.mjs'
  },
  devServer: {
    compress: true,
    port: 8085
  },
  externals: defaultConfig.externals.concat(/react-dom\/.+/).concat(/^@bjs\/?.*$/),
  plugins: [
    new EsmWebpackPlugin({
      moduleExternals: true
    }),
    new MiniCssExtractPlugin(),
    new Dotenv()
  ],
  resolve: {
    alias
  }
})

]; };

Below is the error

Need help with this error

[MilanKovacic]

Hi, did you solve the issue?

[sathishkumar555]

Hey MilanKovacic, The issue has been resolved. In the webpack configuration, I removed the style-loader and MiniCssExtractPlugin.loader and replaced them with an isomorphic style loader, which successfully resolved my issue. Thank you!