storybook: Does not support less

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 you can use this:

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

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!

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’

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

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;
};

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

should be:

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

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 😃

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)

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
}