CODEWITHSUNDEEP
webpacklessantdstorybook
Ronny vdb
Ronny vdb

Reputation: 2474

storybook with ant design theme less not working

I am trying to set up storybook with Ant Design, and a custom Ant Design theme. The theme uses a less css file to override the theme properties.

However, when I try to complie storybook I get the following error:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

I have configured less to enable inline javascript in my storybook main.js file as follows:

module.exports = {
  stories: ['../stories/**/*.stories.tsx'],

  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions', 
    '@storybook/addon-essentials', 
    '@storybook/addon-backgrounds'],
  
    webpackFinal: async (config, { configType }) => {
      config.module.rules.push({
        // this is for both less and scss
        test: /.*\.(?:le|c|sc)ss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader',
          options: {
            modules: false
          }
        }, {
          loader: 'less-loader',
          options: {
              javascriptEnabled: true
          }
        }, {
          loader: 'sass-loader'
        }
      ]
      });
      config.plugins.push(new MiniCssExtractPlugin({
        filename: '[name]-[contenthash].css',
        chunkFilename: '[id]-[contenthash].css',
      }));
      return config;
    },
};

As you can see in the snippet above, the less loader has the javascriptEnabled option set to true.

Any suggestions to get this to work will be greatly appreciated. TIA!

EDIT Add current config:

[
  {
    test: /\.(mjs|tsx?|jsx?)$/,
    use: [ [Object] ],
    include: [ '/Users/...' ],
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    use: [ [Object] ],
    include: /[\\/]node_modules[\\/](@storybook\/node-logger|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/
  },
  { test: /\.md$/, use: [ [Object] ] },
  {
    test: /\.js$/,
    include: /node_modules\/acorn-jsx/,
    use: [ [Object] ]
  },
  { test: /\.(stories|story).mdx$/, use: [ [Object], [Object] ] },
  {
    test: /\.mdx$/,
    exclude: /\.(stories|story).mdx$/,
    use: [ [Object], [Object] ]
  },
  {
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: '/Users/.../Storybook/node_modules/@storybook/source-loader/dist/index.js',
    options: { injectStoryParameters: true, inspectLocalDependencies: true },
    enforce: 'pre'
  },
  {
    test: /\.css$/,
    sideEffects: true,
    use: [
      '/Users/.../Storybook/node_modules/@storybook/core/node_modules/style-loader/dist/cjs.js',
      [Object],
      [Object]
    ]
  },
  {
    test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
    loader: '/Users/.../Storybook/node_modules/file-loader/dist/cjs.js',
    options: { name: 'static/media/[name].[hash:8].[ext]', esModule: false }
  },
  {
    test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
    loader: '/Users/.../Storybook/node_modules/url-loader/dist/cjs.js',
    query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
  }
]

Upvotes: 3

Views: 5183

Answers (1)

tmhao2005
tmhao2005

Reputation: 17514

The issue is from you apply the rule for your import without options like this:

import '!style-loader!css-loader!less-loader!../css/theme.less';

Since you already declared the rules for your .less file which means you just simply import it normally like this:

import '../css/theme.less';

One more thing, you have to refine is to split less and scss files as separate rules instead of combining them together which is likely ending up an issue. Plus, MiniCssExtractPlugin is also unnecessary here since style-loader is being used to append style on document.

In short, here are the few things you would change. Please also read my inline comment as well:

preview.js

import '../css/theme.less';
// In case of being keen for `scss` file
import '../css/layout.scss';

export const parameters = {
  // ...
}

main.js

module.exports = {
  stories: ['../stories/**/*.stories.tsx'],

  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions',
    '@storybook/addon-essentials',
    '@storybook/addon-backgrounds'
  ],

  webpackFinal: async (config) => {
    config.module.rules.push({
      // this is for both less and scss
      test: /.*\.(?:le|c)ss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: false
          }
        },
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true
            }
          }
        }
      ]
    });
    
    // If you wish to use `scss` file
    // Keep in mind to install `sass` which I don't see it as apart of your deps
    // npm i -D sass
    config.module.rules.push({
      // this is for both less and scss
      test: /.*\.(?:sc|c)ss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: false
          }
        },
        'sass-loader',
      ]
    });

    // I don't think you need this anymore since `style-loader` is being used 
    // config.plugins.push(new MiniCssExtractPlugin({
    //   filename: '[name]-[contenthash].css',
    //   chunkFilename: '[id]-[contenthash].css',
    // }));

    return config;
  },
};

That's it! Hope it would help you more about webpack + storybook working together.

Upvotes: 4

Related Questions