[Bug] Styles (.scss) inside React component not being processed

[dhAlcojor]

What's going on

I'm pretty sure it's probably my fault and I'm doing something wrong, but I have created a React component and styles are not working.

In ContentScript/index.tsx I'm adding a React component to the web page:

import React from 'react';
import ReactDOM from 'react-dom';
import ConventionsLink from './ConventionsLink';
...
const navigation: HTMLUListElement | null = document.querySelector(NAVIGATION_SELECTOR);
const conventions = document.createElement('li');
conventions.className = 'conventions';
navigation.append(conventions);
ReactDOM.render(<ConventionsLink />, conventions);

This is the code for the component:

import React from 'react';
import './ConventionsLink.scss';

const ConventionsLink: React.FC = () => {
  const onConventionsLink = (e: React.MouseEvent<HTMLAnchorElement>): void => {
    e.preventDefault();
    console.log('ConventionsMenuItem clicked');
  };

  return (
    <a
      id={'conventions-link'}
      href={'#'}
      onClick={($event): void => onConventionsLink($event)}
    >
      <span className={'icon'} />
      <span className={'title'}>Salones</span>
    </a>
  );
};

export default ConventionsLink;

And this is the file with the styles:

#conventions-link {
  color: orange;
}

I can't quite see what I might be doing wrong, but the styles are not working.

[laplandlearner]

Can you show me your webpack config? I would like to confirm this. maybe scss rule is required in webpack config. You can check webpack config here. https://github.com/good-guy1218/frontdoor-extension

[dhAlcojor]

@yavis1218 The webpack.config.js is mostly the same as that can be found in the project.

I have made minor modifications like for example this one, to the port property (so I can test the extension while in development in Chrome and Firefox at the same time):

nodeEnv === 'development'
    ? new ExtensionReloader({
        port: targetBrowser === 'chrome' ? 9090 : 9091,
        reloadPage: true,
        entries: {
          // TODO: reload manifest on update
          contentScript: 'contentScript',
          background: 'background',
          extensionPage: ['popup', 'options'],
        },
      })

Or this one (using constants and path.join() to configure all paths):

const sourcePath = path.join(__dirname, 'src');
const scriptsPath = path.join(__dirname, 'src', 'scripts');
const destPath = path.join(__dirname, 'extension');

...

entry: {
  manifest: path.join(sourcePath, 'manifest.json'),
  background: path.join(scriptsPath, 'background.js'),
  contentScript: path.join(scriptsPath, 'contentScript.js'),
  popup: path.join(scriptsPath, 'popup.js'),
  options: path.join(scriptsPath, 'options.js'),
  bgServiceWorker: path.join(scriptsPath, 'service-worker.js'),
},

But the part about SCSS files is untouched:

{
  test: /\.(sa|sc|c)ss$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader, // It creates a CSS file per JS file which contains CSS
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            [
              'autoprefixer',
              {
                // Options
              },
            ],
          ],
        },
      },
    },
    'resolve-url-loader',
    'sass-loader',
  ],
}

[laplandlearner]

Hello, @dhAlcojor In this case, you need to use styled component or shadowdom. I used it and it works well