0

I'm using webpack, I have installed both style-loader and css-loader

styles.css

body {
    font-family: Arial;
    color: white;
}

.foo {
    color:blue;
}

.bar {
    color:red;
}

entry.js

require('!style!css!./styles.css');

var css = require('!css!./styles.css');
console.log(css);

Using require('!style!css!./styles.css') results <style> into the page as below

enter image description here

Using var css = require('!css!./styles.css') then console.log(css) results as below

enter image description here

Question

Is it possible to load only specific css class e.g. var fooClass = css.foo, I intend to use this with my React components, e.g. <input style={ foo }/> or maybe <input className={ foo }/>

Artisan
  • 4,042
  • 13
  • 37
  • 61

1 Answers1

0

You cannot do this with css-loader and style-loader but you can use react-css-modules to import a specific class into your react file.

It loads only the necessary css into the document and also it will create a unique name for your class at the time of loading. By this you can use same class name with different styles in different components!

Pranesh Ravi
  • 18,642
  • 9
  • 46
  • 70
  • I have seen `react-css-modules` while searching, how is it related to webpack, loader? plugin?, please explain a little bit more because I have read it but I didn't quite understand, thanks – Artisan Oct 09 '16 at 11:51
  • `react-css-modules` is a better version of `css-loader`. It will be a query param to the existing `css-loader`. You can check here https://github.com/gajus/react-css-modules#webpack – Pranesh Ravi Oct 09 '16 at 11:59