web-extension-starter
web-extension-starter copied to clipboard
[FEAT] add support for css modules
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
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'