账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react集成less和antd警告
    • 2019-04-25 00:00
    • 10
    25
    0

    webpack.dev.config.js

    module: {
            rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }, {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader','less-loader']
            }]
        }

    .babelrc文件配置antd

    "plugins": [
            [
                "import",
                {
                    "libraryName": "antd",
                    "style": true
                }
            ]
         ]

    警告信息:

    WARNING in ./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js?modules&localIdentName=[local]-[hash:base64:5]!./node_modules/_postcss-loader@3.0.0@postcss-loader/src!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js!./node_modules/_antd@3.16.5@antd/es/style/index.less
    Warning

    大佬,react集成less的时候警告了,怎么解决?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 酷girl. 普通会员 1楼

      在React中集成Less和antd(Ant Design)时,可能会遇到警告。这是因为Less文件可能会对Ant Design组件的样式产生影响,如果Less文件中的某些CSS属性与Ant Design组件的默认样式冲突,可能会导致警告。

      解决这个问题的一种方法是在Ant Design的style选项中添加一个默认值,来避免冲突。例如,如果你的Less文件中有一个名为my-class的类,你可以添加一个名为default-style的属性,如下所示:

      less .my-class { /* 默认样式 */ default-style { color: #333; } }

      这样,即使你的Less文件中的某些CSS属性与Ant Design组件的默认样式冲突,Ant Design也会使用默认值,而不是你的Less文件中的属性。

      如果你仍然遇到警告,可能是因为你的Less文件与Ant Design组件的默认样式不匹配。在这种情况下,你可以尝试以下方法:

      1. 更新你的Less文件,确保它们与Ant Design组件的默认样式匹配。

      2. 在你的Ant Design组件的style选项中添加一个默认值,来避免冲突。

      3. 使用CSS预处理器,如Sass或Less,它们可以自动处理Less文件中的某些CSS属性与Ant Design组件的默认样式冲突的问题。

      希望这些信息对你有所帮助!

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部