Storybook 的 Less 预设

为 Storybook 提供一行 Less 配置。

基于 @storybook/preset-scss。

基本用法

npm install --save-dev storybook-preset-less css-loader less less-loader style-loader

然后将以下内容添加到 .storybook/main.js

module.exports = {
  addons: ['storybook-preset-less'],
};

高级用法

您可以通过使用 storybook-preset-less 的 Object 插件声明并在 option 键下添加配置来传递配置。您可以使用 styleLoaderOptions、cssLoaderOptions 和 lessLoaderOptions 键将配置传递给预设的 webpack loader。请参阅每个相应 loader 的文档以了解有效选项。您可以通过字符串声明正常注册其他插件。

module.exports = {
  addons: [
    {
      name: 'storybook-preset-less',
      options: {
        cssLoaderOptions: {
           modules: true,
           localIdentName: '[name]__[local]--[hash:base64:5]',
        },
        lessLoaderOptions: {
          lessOptions: {
            strictMath: false,
            noIeCompat: true,
            relativeUrls: false,
          },
        },
      }
    },
    // You can add other presets/addons by using the string declaration
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
  ]
}