extension.js in monorepo (Nx)

[gusxodnjs]

Hi, I'm using Nx to configure monorepo with the structure below.
package.json is installing react, typescript, and sass.

- apps
  - extension
    - content
      - scripts.tsx
      - styles.scss
    - manifest.json
    - extension.config.js
- node_modules
- package.json

I want to install the module using root's package.json, and the extension app only manages the development code. However, it doesn't work unless you put package.json under extension.
With reference to the issue(#217) below, I succeeded in compiling the .tsx file by adding a custom plug-in in extension.config.js, but the style does not apply. Can you tell me what to do?

ERROR in ./content/styles.scss?inline_style 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .content-script {
|   position: fixed;
|   z-index: 99999;

• apps/extension/content/scripts.tsx

import ReactDOM from 'react-dom/client'

import './styles.scss?inline_style'

if (document.readyState === 'complete') {
  initial()
} else {
  document.addEventListener('readystatechange', () => {
    if (document.readyState === 'complete') initial()
  })
}

function initial() {
  // Create a new div element and append it to the document's body
  const rootDiv = document.createElement('div')
  rootDiv.id = 'extension-root'
  document.body.appendChild(rootDiv)

  // Injecting content_scripts inside a shadow dom
  // prevents conflicts with the host page's styles.
  // This way, styles from the extension won't leak into the host page.
  const shadowRoot = rootDiv.attachShadow({ mode: 'open' })

  // Use the shadow root as the root element to inject styles into.
  window.__EXTENSION_SHADOW_ROOT__ = shadowRoot

  const root = ReactDOM.createRoot(shadowRoot)
  root.render(
    <div className="content-script">
      <h1>Hello from content script</h1>
    </div>
  )
}

• apps/extension/content/style.scss

.content-script {
  position: fixed;
  z-index: 99999;
  right: 50%;
  bottom: 50%;
  padding: 20px;
  background: #111;
  color: #fff;
}

• apps/extension/extension.config.js

const path = require('path')

class MonorepoPlugin {
  apply(compiler) {
    const monorepoRoot = path.join(process.cwd(), '../../')
    const isDevelopment = compiler.options.mode === 'development'

    compiler.options.module.rules = [
      {
        test: /\.(js|mjs|jsx|mjsx|ts|mts|tsx|mtsx)$/,
        include: [monorepoRoot],
        exclude: /node_modules/,
        use: {
          loader: require.resolve('swc-loader'),
          options: {
            sync: true,
            module: {
              type: 'es6',
            },
            minify: !isDevelopment,
            isModule: true,
            jsc: {
              target: 'es2016',
              parser: {
                syntax: 'typescript',
                tsx: true,
                jsx: true,
                dynamicImport: true,
              },
              transform: {
                react: {
                  development: isDevelopment,
                  refresh: isDevelopment,
                  runtime: 'automatic',
                  importSource: 'react',
                },
              },
            },
          },
        },
      },
      ...compiler.options.module.rules,
    ]
  }
}

/** @type {import('extension').FileConfig} */
module.exports = {
  config: (config) => {
    config.plugins.push(new MonorepoPlugin())

    return config
  },
}