antd-mobile样式不生效按需加载解决

最新推荐文章于 2025-06-19 09:00:00 发布

原创最新推荐文章于 2025-06-19 09:00:00 发布 · 8.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#antd-mobile #antd #ant-design

js 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了如何在项目中使用 .babelrc 文件的 plugins 配置实现 Ant Design Mobile 的按需加载，避免手动引入 CSS 文件，同时分享了在 webpack4 中处理 CSS 的配置方法，确保按需加载的正确实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.babelrc文件的plugins 加入

"plugins": [
    ["import", { "libraryName": "antd-mobile", "libraryDirectory": "es","style": "css" }],//重点！网上大多漏了句"libraryDirectory": "es",
    "transform-runtime",// 这一句是我本地原有的，
  ]

按理说按需加载不需要手动引入antd相关模块的css文件的
但一直没搞通，今天搞了下终于可以了，把代码贴出来便于记忆，也方便大家
在webpack4的配置文件中，对于css的处理
先全局style+css loader
再针对自己的代码（除去node_modules中的）添加 option:{modules: true}

      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ] 
      }, 
      {
        test: /\.css$/,
        exclude: /node_modules/,             // 这里！
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader', 
            options: {                       // 还有这里！
              modules: true
            }
          },
        ] 
      }