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

最新推荐文章于 2024-08-05 23:30:12 发布

许珊珊

最新推荐文章于 2024-08-05 23:30:12 发布

阅读量8.4k

点赞数

分类专栏： js 文章标签： antd-mobile antd ant-design

本文链接：https://blog.csdn.net/xss392795158/article/details/91450851

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

.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
            }
          },
        ] 
      }