5

I would like to globally append a specific selector to all CSS selector used in my application.

I'm using React and those Webpack loaders post-css, css-loader, sass-loader and extract-text-webpack-plugin.

I don't want to edit all my classname within jsx files. I just want to append this specific selector at build time.

Is there a loader to achieve this? Or any other solution...

What I actually have:

.myClass {
  ...

  &--blue { ... }
}

What I want after Webpack transpilation:

.specificClass .myClass { ... }
.specificClass .myClass--blue { ... }

Thanks

Gautier

PS: The reason I need this feature is to avoid CSS selector collision with the Website I'm integrating my application. I don't wan't to manually edit all my scss files to append the selector.

Gautier Rollin
  • 127
  • 5

1 Answers1

0

this should be solvable by in you main sass file:

.specificClass {
    @import 'variables';
    @import 'fonts';
    // ... do more imports
}
Philipp Sander
  • 10,139
  • 6
  • 45
  • 78