Storybook: Does not support less

[Peakdrum]

I am trying to use storybook with antd but in antd it is using less so I have this error:

ERROR in ./~/antd/lib/style/index.less
Module parse failed: D:\Projects\btfWeb2\node_modules\antd\lib\style\index.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

Can anyone help me adding less to storybook ? Thanks a lot

[marc-rutkowski]

Hi @Peakdrum
This error message refers to webpack loaders.
You need to set one to support LESS files.

Check the storybook documentation about custom webpack config.
There is an example on this page about how to support SASS. Supporting LESS will be probably very similar, maybe with less-loader.

Hope this help!

[danielduan]

@Peakdrum you can use this:

{ test: /\.less$/, loaders: [ 'style-loader', 'css-loader', 'less-loader' ] }

[bkeating]

This was very helpful. Being that my project is via create-react-app, I did the following to get storybook working with LESSCSS support:

Install webpack loaders:

yarn add style-loader css-loader less-loader

Create a new, local webpack config at .storybook/webpack.config.js with the following contents:

const path = require('path');

// load the default config generator.
let genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');

module.exports = function(config, env) {
  let extendedDefaultConfig = genDefaultConfig(config, env);

  // Make whatever fine-grained changes you need
  extendedDefaultConfig.module.loaders.push({
    test: /\.less$/,
    loaders: ['style-loader', 'css-loader', 'less-loader'],
    include: path.resolve(__dirname, '../src/')
  });

  return extendedDefaultConfig;
};

[Peakdrum]

Cool thanks
@bkeating I don't know that you can config webpack for storybook !!! Thats a real good trick

[zhsisusie]

may be webpack not match less file . path.resolve(__dirname, '../src/'),,,you can remove this and then try again

[leojh]

This works as of today. Borrowed from @bkeating's post and Storybook's docs at: https://storybook.js.org/configurations/custom-webpack-config

const path = require("path")

module.exports = (baseConfig, env, defaultConfig) => {

  defaultConfig.module.rules.push(
    {
      test: /\.less$/,
      loaders: ['style-loader', 'css-loader', 'less-loader'],
      include: path.resolve(__dirname, '../src/')
    }
  )

  return defaultConfig
}

[fgiarritiello]

@leojh is that the only thing you had to change to make it work? I'm still having trouble

[leojh]

That was it and our setup is quite complex. Make sure you're on the latest version of storybook.

[fgiarritiello]

Which dependencies did you install to make this work?

[leojh]

make sure you have these two less and less-loader, but I don't think you need anything else besides storybook.

I have these right now:

    "@storybook/addon-info": "^3.4.3",
    "@storybook/addon-options": "^3.4.3",
    "@storybook/addons": "^3.4.3",
    "@storybook/react": "^3.4.3",

[jembach]

Hi,
i have also tested the modification by @leojh but it isn't still working.

ERROR in ./node_modules/@storybook/core/node_modules/css-loader??ref--2-1!./node_modules/@storybook/core/node_modules/postcss-loader/lib??postcss!./node_modules/antd/lib/tree/style/index.less
Module build failed: Syntax Error 


(10:1) Unknown word

   8 | @tree-showline-icon-color: @text-color-secondary;
   9 | 
> 10 | .antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-tree-checkbox");
     | ^
  11 | 
  12 | .@{tree-prefix-cls} {

 @ ./node_modules/@storybook/core/node_modules/css-loader??ref--2-1!./node_modules/@storybook/core/node_modules/postcss-loader/lib??postcss!./node_modules/antd/lib/style/components.less 51:10-190
 @ ./node_modules/@storybook/core/node_modules/css-loader??ref--2-1!./node_modules/@storybook/core/node_modules/postcss-loader/lib??postcss!./node_modules/antd/dist/antd.less
 @ ./node_modules/@storybook/core/node_modules/css-loader??ref--2-1!./node_modules/@storybook/core/node_modules/postcss-loader/lib??postcss!./styles/main.css
 @ ./styles/main.css

this is an example error. Their are more errors like this.

Have anyone an idea how to solve this?

[Enalmada]

I also needed antd to work with storybook and found I needed javascriptEnabled option also:

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader",
                    options: {
                        javascriptEnabled: true
                    }
                }]
            }
        ]
    }
};

~ https://stackoverflow.com/a/48043781/1502448

[tcjcodes]

I'm seeing a less issue :(

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "../_variables.less";
| 

It's still failing, even after following the docs and replacing for 'less'

[Dergash]

Hello @tcjcodes!
I've encountered a similiar problem when trying to include my css import statement in my manager.js file, so my broken config was

// .storybook/manager.js
import "./index.less";

```js
// .storybook/main.js
const path = require("path")

module.exports = {
webpackFinal: async config => {
config.module.rules.push({
test: /.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: false } },
{ loader: 'less-loader', options: { javascriptEnabled: true }}
]
})
return config
}
}

I was confused a bit as the same approach worked if I import `index.css` instead of `index.less`, but apparently at the moment `manager.js` is called updated webpack config with new loaders is not ready yet.
I've moved my global less import into a different file and it worked after that:
```js
// .storybook/config.js
import "./index.less";

[ndelangen]

// .storybook/manager.js
import "./index.less";

should be:

// .storybook/preview.js
import "./index.less";

[thehappydinoa]

Just a quick update. The only way I could get it working with v5.3.19 is with this:

// .storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    {
      name: '@storybook/preset-create-react-app',
      options: {
        craOverrides: {
          fileLoaderExcludes: ['less'],
        },
      },
    },
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs/register',
    '@storybook/addon-storysource',
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.less$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { modules: false } },
        {
          loader: 'less-loader',
          options: { lessOptions: { javascriptEnabled: true } },
        },
      ],
    });
    return config;
  },
};

and

// .storybook/preview.js
import React from 'react';
import { addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import '../src/styles/global.less';

addDecorator(withKnobs)

(Ignore my addons if you don't have them set up)

[shilman]

@thehappydinoa what version of @storybook/preset-create-react-app are you using? cc @mrmckeb

[thehappydinoa]

@shilman Here is my storybook versions:

{
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-viewport": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^5.3.19",
    "@storybook/theming": "^5.3.19",
}

[mrmckeb]

Hi @thehappydinoa, Create React App does not support Less, which is why the Create React App preset doesn't.

You'll definitely need to modify the Webpack config to make this work - which it looks like you have done :)

[fengerzh]

I solved it by following this:

yarn add -D less less-loader

Add a file named webpack.config.js in .storybook as below:

const path = require('path');

module.exports = (baseConfig) => {
  baseConfig.config.module.rules.push({
    test: /\.less$/,
    loaders: ['style-loader', 'css-loader', 'less-loader'],
    include: path.resolve(__dirname, '../src/'),
  });

  return baseConfig.config;
};