isomorphic-style-loader doesn't work as it supposed to
来源： https://stackoverflow.com/questions/63458657/isomorphic-style-loader-doesnt-work-as-it-supposed-to
isomorphic-style-loader
Server Side render : 'css-loader/locals' generate different classNames then bundle.css - webpack
问题 Trying to implement isomorphic rendering with my new project, so i read lots of articles fancy things like css-loader , state sharing etc,etc. So after some struggle somehow i render my page on server side with css locals.So i move on and start building other pages coz everything looks great, until i didn't disable the javascript on my browser .After that I found the difference on html that i received from server have different css local className and the bundle.css has different. I really
Why does isomorphic-style-loader throw a TypeError: Cannot read property 'apply' of undefined when being used in unison with CSS-Modules
问题 I'm currently trying to render the application on the server, which works for the HTML and JS, but found that my styles (.less | .scss) would not load. I did some research and figured, not sure, that I was missing the isomorphic-style-loader in my Webpack configuration based on others running into the same issues. I set it up, at least how I understood it, but am now finding that when running the application I receive the following error: TypeError: Cannot read property 'apply' of undefined
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 { | margin-bottom: 8.75rem; @ ./~/style-loader?{"camelCase":true,"localIdentName":"[name]_[local]_[hash:base64:3]","modules":true}!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?{"sourceMap":true,"outputStyle":"expanded","include":["/opt/inmoblex/current
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 'react-dom' import withStyles from 'isomorphic-style-loader/lib/withStyles' import s from './ImageTool.scss' class ImageTool extends Component { render() { return ( <div className={s.someclass}></div> ) } } export default withStyles(ImageTool, s) So this works
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 'react-dom' import withStyles from 'isomorphic-style-loader/lib/withStyles' import s from './ImageTool.scss' class ImageTool extends Component { render() { return ( <div className={s.someclass}></div> ) } } export default withStyles(ImageTool, s) So this works well. Now what happens if you need to name your class some-class ? Clearly className={s.some-class}
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 css-modules-require-hook : Advantage : Easy to configure. You just need to call the hook at the beginning of server code. You don't need to modify components. Caveat : It modifies the require.extensions global object, which is deprecated . Using the isomorphic-style-loader : Advantage : No more hooks to require.extensions . Caveat : Wrapping components with
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 css-modules-require-hook: Advantage : Easy to configure. You just need to call the hook at the beginning of server code. You don't need to modify components. Caveat : It modifies the require.extensions global object, which is deprecated . Using the