Comments (5)
Hey so you'll need to add style-loader, extract-text-loader and then either write your own parser for webpack's json output, or use assets-webpack-plugin (I prefer that assets-webpack personally). Then you need to load assets.json in server/index.js and then use template literals to properly load the correct path to the compiles css file:
Take a look at my repo restarter and it's webpack configs and server/index.js
. It does not server-side render, (it could be modified to though). However, it's a good demonstration of the technique you'll need to use, how to handle dev vs. prod hashing, and how to use assets-webpack-plugin, extract-text, and style-loader together.
from razzle.
Relevant lines from Restarter Repo
Instead of .css, you'll want to change this out for .less. Depending on whether you want to use postcss or not, your loader query will differ:
https://github.com/jaredpalmer/restarter/blob/master/tools/webpack.dev.js#L46
I also suggest adding a vanilla .css loader just for node_modules
. This will let you import css libraries from npm like normalize.css or sanitize.css, without having to use another script tag. You just require them in your client entry file like: import 'normalize.css/normalize.css
. See an example here:
https://github.com/jaredpalmer/restarter/blob/master/client/index.js#L4
Only load assets.json (output of assets-webpack-plugin in production):
https://github.com/jaredpalmer/restarter/blob/master/server/index.js#L36
Because webpack in production adds hashes to the end of the file names, you need to render the correct one:
https://github.com/jaredpalmer/restarter/blob/master/server/index.js#L77
Note: It goes without saying that you'll need to remove all the Aphrodite code from 1. components, 2. server/index.js, 3. client/index.js
Hope that helps.
@justingreenberg Did I miss anything?
from razzle.
Oh, thx u man for your quickly answer. But I want using less like:
- component
- Component.js
- Component.less
- index.js
and I want to write some code in index.js like:
include './Component.less';
export { default as Component } from './Component.js';
In another projects without SSR, it's work, but in this implementation it's not work correctly. Maybe I should use a webpack-dev-server for this trick.
At now, I have webpack config file for development mode with this lines:
loaders: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
exclude: /(node_modules|server)/,
include: COMMON_PATH
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'style!css'),
include: COMMON_PATH
}
],
plugins: [
new ExtractTextPlugin("[name].css", { allChunks: true })
]
And when I tried to run npm start
babel-core is crash with stack trace:
Application.less: Unexpected token (5:5)
5 | body {
| ^
6 | background-color: #000;
7 | }
It really huge issue for me :( I not see how I can fix it. Please help me if you can
from razzle.
Oh, it's my fuckup. I forgot about my isomorphic code and how it's code running. So, I found solution for that, it's webpack-isomorphic-tools. Thx for your time. If I will have a time I would like to fork your boilerplant and configure for Less.
from razzle.
No worries. Glad you figured things out. SSR definitely complicates things.
TBH, I'm not even convinced it's worth it. Recently been building apps with "poor man's SSR": which basically loads up state into window.InitalState, but doesn't call ReactDOMServer.render cuz it's pretty slow and you still have to wait for React to load on the client for things to be interactive. This is how Instagram is rendering these days (just view source in chrome, and you'll find a react-div and a HUGE window.initialState). The beauty of this method is you can still block google from indexing your API routes with robots.txt, but get it render/SEO the client. Auth is super simple too, you just pass req.user (from passport etc) for each request into initialState.
The other great thing about this, is that you don't have to worry about isomorphic webpack, which as you have just learned, can be a huge headache. However, if one day, you do decide that you want to render components on server, you'll only have to change a trivial amount of code.
from razzle.
Related Issues (20)
- HMR does not activate when a file containing only types is modified
- Dependency Terminate uses GPLv2 License - any alternative?
- Can't deploy to heroku
- plugin options are coming to be undefined HOT 4
- Content Security Policy Implementation HOT 1
- Regarding deployment in server HOT 5
- For Laravel project, add it where ? please HOT 1
- Is the project abandoned? 🤔 HOT 8
- How to expose config to out ?
- digital envelope routines::unsupported HOT 1
- Why razzle forcing buffer and process package in ProvidePlugin if webpack version is 5
- Unexpected token: punc (.) HOT 6
- Does latest razzle support react 18 ? HOT 1
- Support for react 18 HOT 4
- ~Wrong repo~
- How to use webpack 5 with Razzle 4 HOT 1
- Razzle utilizes vulnerable versions of browserslist and minimatch as nested dependencies, causing security issues.
- Maybe mark this project as abandoned in its github repository description and in readme? HOT 2
- Anyone has a fork updated for webpack-dev-server 5? HOT 1
- How to use 'mini-css-extract-plugin' in razzle config HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from razzle.