web-extension-starter icon indicating copy to clipboard operation
web-extension-starter copied to clipboard

[FEAT] add support for css modules

Open abhijithvijayan opened this issue 2 years ago • 1 comments

adjusting webpack config like

		{
            loader: 'css-loader', // Takes the CSS files and returns the CSS with imports and url(...) for Webpack
            options: {
              sourceMap: true,
              modules: {
                localIdentName: isDevelopment
                  ? '[path][name]__[local]'
                  : '[hash:base64]',
              },
              importLoaders: 1,
            },
          },

will add support for css modules so that

import styles from './styles.scss';

export const Login: React.FC = () => {
  return (
    <section className={styles.login}>
      <h2>extension</h2>
    </section>
  );
};

will work fine

Screenshot 2021-11-29 at 11 19 00

abhijithvijayan avatar Nov 29 '21 05:11 abhijithvijayan

If you wanna add SVG or CSS into component as a module, just need some changement. Create a custom.d.ts file in root directory.

declare module '*.svg' {
    import * as React from 'react';

    export const ReactComponent: React.FunctionComponent<
        React.SVGProps<SVGSVGElement>
    >;

    const src: string;
    export default src;
}
declare module '*.css'
declare module '*.scss'

laplandlearner avatar Apr 24 '23 02:04 laplandlearner