Open meetromb opened 5 years ago
Project created with CRA, config-overrides setup:
config-overrides
config.module.rules.push({ test: /\.(js|mjs|jsx|ts|tsx)$/, use: [ { loader: 'astroturf/loader', options: { extension: '.module.css' }, }, ], })
Components code:
export const OptionElement = styled('li')` padding: 8px 10px; list-style-type: none; &:hover { background-color: red; } `
Result CSS:
.OptionElement_option-element__3KySt { padding: 8px 10px; list-style-type: none; (!) &: hover {; (!) background-color: red; (!)}: ; }
As mentioned here you must add this rule to your config to get nesting work correctly.
{ test: /\.css$/, use: ['style-loader', 'astroturf/css-loader'], }
Project created with CRA,
config-overrides
setup:Components code:
Result CSS: