How can I integrate this with Next.js?

[cchvuth]

• Install
  npm i babel-plugin-react-scoped-css file-loader scoped-css-loader

• Create .babelrc
  { "presets": ["next/babel"], "plugins": ["babel-plugin-react-scoped-css"] }

• Create .next.config.js
  `module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
  config.module.rules.push({
  test: /.scss$/,
  use: [
  {
  loader: isServer ? 'file-loader' : 'style-loader'
  },
  {
  loader: 'css-loader'
  },
  { loader: 'scoped-css-loader' },
  {
  loader: 'sass-loader'
  }
  ]
  });

  return config;
  }
  };`

[gaoxiaoliangz]

Currently it's quite involved to intergrade this manually with next.js. You have to modify webpack config accordingly to insert the babel plugin and webpack loader into the right position. If you really have to do this, you can check out craco-plugin-scoped-css to see how it's done. It's very similar.
Fortunately, I'm working the next.js plugin, and it will be woking fine when I release it.

[cchvuth]

Actually, I managed to get it working with above instructions I modified. Thanks anyways.