Stack Overflow
Stack Overflow

Questions tagged [isomorphic-style-loader]

An alternative CSS style loader, which works similarly to style-loader, but is optimized for isomorphic apps.

An alternative CSS style loader, which works similarly to style-loader, but is optimized for isomorphic apps. In addition to what style-loader provides, it allow to render critical path CSS during server-side rendering (SSR), by adding two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns CSS string).

website: https://github.com/kriasoft/isomorphic-style-loader

19 questions
4
votes
1 answer

How can I configure isomorphic-style-loader to load a node module?

I'm trying to use the react-draft-wysiwyg module, but the imported styles associated with the module aren't being utilized. I think this is due to the imported css being loaded into a hash whereas the class attributes of the elements in the module…
AstroBoogie
  • 498
  • 5
  • 17
2
votes
1 answer

isomorphic-style-loader doesn't work as it supposed to

Hey I am doing this simple react + SSR project that incorporates the isomorphic-style loader. I followed the step-by-step guide to implement it as detailed here https://www.npmjs.com/package/isomorphic-style-loader but it just doesn't work. The…
kabison33
  • 101
  • 2
  • 10
2
votes
0 answers

best way to load css on server side rendering using Nodejs with React-Redux (Universal App)

what is the best way to load css on server side rendering with React-Redux (Universal App) Note: server side performance is priority. For Ex: Isomorphic-style-loader or react-style or Any other.
Nithish
  • 369
  • 1
  • 8
  • 20
2
votes
1 answer

Server-side rendering of CSS modules

I am going to import styles with CSS Module and make it work with server-side rendering. I tried the following methods but each one has its own caveat. What is the best possible way to require('.style.scss') if any side effects? Using the…
Ming Soon
  • 998
  • 2
  • 11
  • 32
2
votes
1 answer

How to prevent isomorphic-style-loader from throwing css syntax error

I am having trouble getting the webpack 'isomorphic-style-loader' to correctly parse my css module from a react component. Everything runs fine with webpack, but when i try to load the react component on the server i get the following error: >…
user1517041
  • 21
  • 3
2
votes
1 answer

How to configure isomorphic-style-loader with webpack and react?

I'm trying to configure webpack with isomorphic-style-loader but I keep getting the following message. (I'm not really in need of using isomorphism so if there is an easier way to do this I would not mind changing). What I need is scoping of scss…
Pablo Jomer
  • 9,870
  • 11
  • 54
  • 102
1
vote
1 answer

Isomorphic-style-loader, Cannot read property 'apply' of null

Hi I've seen this same error and multiple possible solutions but none has been able to solve my issue (Probably because I'm lacking in depth understanding of the whole React structure). I know that context.insertCss.apply(context, styles); isn't…
Santiago VdeK
  • 72
  • 2
  • 13
1
vote
3 answers

isomorphic-style-loader - How to add an "active" class

I'm using react-starter-kit and building a list component that looks like this: import React from 'react'; import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './CommandList.css'; const CommandList = () => { return ( …
Obscenity
  • 197
  • 12
1
vote
1 answer

Importing stylesheet in a server rendered react view - TypeError: style._getCss is not a function

I am building an isomorphic react-redux app on top of NodeJS. I am rendering my homePage from the server. However, my styles are not reflected in my rendered view. I would like to import stylesheets just how I do it on the client side. I tried this…
Mona
  • 298
  • 3
  • 14
1
vote
1 answer

Webpack 2 sass-loader Unexpected character '@'

i have the next webpack 2 rules configuration when run webpack throwed the next error: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @media screen and (min-width: 40em) { | .feature { | …
cristian camilo cedeño gallego
  • 3,502
  • 4
  • 20
  • 31
1
vote
1 answer

How do you use withStyles (isomorphic style loader) when your className has a dash in it?

Let's say this is your SCSS: .someclass { background: red; height: 1500px; width: 10000px; } And this is how you use it: import React, { Component, PropTypes } from 'react' import ReactDropZone from 'react-dropzone' import ReactDOM from…
tacos_tacos_tacos
  • 10,277
  • 11
  • 73
  • 126
1
vote
2 answers

Can't style material-ui with its own props

I'm using the material-ui and try to style the background-color of the RaisedButton, using one of its props called backgroundColor: import React, {Component} from 'react'; import RaisedButton from 'material-ui/lib/raised-button'; import withStyles…
Halt
  • 1,055
  • 9
  • 18
1
vote
1 answer

How to load styles onto React server-side using Webpack and go back to style-loader client-side?

My goal is to render CSS into a style tag server-side similar or exactly how the style-loader plugin would do it client-side. I know this is impossible because style-loader writes directly to the DOM and the DOM doesn't exist in Node.js. Currently…
Kevin Ghadyani
  • 6,829
  • 6
  • 44
  • 62
0
votes
1 answer

How to add react-flexbox-grid with isomorphic-style-loader

Any solution in solving this problem here using isomorphic-style-loader? kriasoft/react-starter-kit Using the react-starter-kit, and the solutions they proposed here: roylee0704/react-flexbox-grid doesn't seem to fix the issue.
Mike Victoria
  • 245
  • 1
  • 4
  • 23
0
votes
0 answers

wrapWithStyles(...): A valid React element (or null) must be returned

I am able to render the component well without 'isomorphic-style-loader' but i get this warning when exported using withStyles() "Warning: wrapWithStyles(...): A valid React element (or null) must be returned. You may have returned undefined, an…
nivendha
  • 792
  • 7
  • 16
1
2