Vue2项目：如何在Storybook运行依赖.less的Nitrozen-vue组件库？

1. 修复依赖版本兼容问题 #

Webpack4 与 less-loader@8.x+ 不兼容，会导致编译阻塞。先卸载现有版本，安装适配Webpack4的版本：

npm uninstall less-loader
npm install less-loader@7.3.0 less --save-dev

2. 调整Webpack规则避免重复处理 #

Storybook默认已配置样式处理规则，直接新增规则会导致重复编译。修改配置，仅针对Nitrozen-vue库的less文件进行处理：

const path = require("path");

module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.less$/,
      include: path.resolve(__dirname, "../node_modules/nitrozen-vue"),
      use: [
        require.resolve("vue-style-loader"),
        {
          loader: require.resolve("css-loader"),
          options: { importLoaders: 1 }
        },
        require.resolve("less-loader")
      ],
    });
    return config;
  },
};

3. 全局导入库样式 #

在 .storybook/preview.js 中直接导入Nitrozen-vue的样式入口，确保样式全局生效：

// 优先用编译好的CSS文件（如果库提供）
import 'nitrozen-vue/dist/nitrozen-vue.css';
// 若没有编译好的文件，直接导入less入口
// import 'nitrozen-vue/src/styles/main.less';

4. 清理Storybook缓存 #

旧缓存可能导致加载异常，启动时清除缓存：

npm run storybook -- --no-manager-cache

5. 验证Loader顺序 #

确保Webpack loader顺序为 vue-style-loader → css-loader → less-loader，loader执行顺序是从右到左，顺序错误会导致样式无法正确注入。

内容的提问来源于stack exchange，提问作者Aadesh Kulkarni