Ant-mobile css和项目CssModule冲突问题

问题

React项目集成Ant-mobile UI库。webpack编译

根据ant-mobile官方说明使用按需导入css [babel-plugin-import]插件

编译过程中 ant-mobile css导入失效问题

• 问题分析

  webpack部分配置项
  
  css=>
  	{
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true
            }
          },
          "postcss-loader"
        ]
      }	
  
  balel-loader=> 
      options:{
      	plugins:[
      		['import', { libraryName: 'antd-mobile', style: "css" }],
      	]
      }
  

  • 原因

    项目中css 开启cssModule功能。ant-mobile并不支持。导致加载ant-mobile css样式失效
    

• 解决方法

  • 项目css | scss 开启cssModule
  • ant-mobile css 不开启cssModule

• 实现

  • 修改现有css | scss 处理loader

    {
       test: /\.scss$/,
      exclude: /node_modules/, //重要
      use: []
    }
    

    {
       test: /\.css$/,
      exclude: /node_modules/, //重要
      use: [
      	{
      loader: "css-loader",
      options: {
        importLoaders: 3,
        modules: true
      }
    }
      ]
    }
    

  • 增加antd-mobile css文件处理

    	{
        test: /\.css$/,
        include: /node_modules/, //重要
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              modules: false,//关闭cssModule
              importLoaders: 1,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
          },
        ]
      }