Rsuite 取消reset-import 失败

因为公司的UI组件库不满足需求，所以引入了rsuite这个库，但是rsuite的样式默认对一些元素做了reset的初始化，如果直接引入rsuite的样式，就会出现一些冲突，
比如突然多出了 p+p{ margin-top: 8px} 的样式，影响到了界面

官方给出了解决方案

image.png

看一下less-loader的版本，@5或者更老的版本直接

{
    test: /\.less$/,
    loader: 'less-loader',
    options: {
          javascriptEnabled: true,
          modifyVars: { '@reset-import': false }
    }
}

新版本的less-loader直接

{
    test: /\.less$/,
    loader: 'less-loader',
    options: {
        // 如果使用 less-loader@5 或者更老的版本 ，请移除 lessOptions 这一级直接配置选项。
        lessOptions: {
          javascriptEnabled: true,
          modifyVars: { '@reset-import': false }
        }
    }
}

配置了后仍然失败

最后发现，我引入的文件有问题，我在全局的less里面引入的是

@import "~rsuite/dist/styles/rsuite-default.min.css";

modifyVars的作用是，覆盖less里面的变量，看了下rsuite里面的源码，是有@reset-import这么一个变量做判断的

image.png

所以引入css文件，当然没用啦。要引入less的文件

@import '~rsuite/lib/styles/themes/default/index.less';

龟龟，还有这讲究