Using Less

[victortomilin]

Hi.

How can I use Less for building my stylesheets? Because I don't want to use Aphrodite. Please, help me, because I started to use this boilerplate for the real project.

[jaredpalmer]

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.

[jaredpalmer]

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?

[victortomilin]

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

[victortomilin]

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.

[jaredpalmer]

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.