react 使用css module之后antd-mobile樣式無法加載

create-react-app 是業界最優秀的 React 相關應用開發工具之一，本文檔嘗試以此工具來使用 antd-mobile 組件。

安裝和初始化

$ npm install -g create-react-app # 注意：工具會自動初始化一個腳手架並安裝 React 項目的各種必要依賴，如果在過程中出現網絡問題，請嘗試配置代理或使用其他 npm registry。 $ create-react-app my-app $ cd my-app $ npm start

css 模塊化 為了使每個組件各自使用自己的樣式 
在
node_modules\react-scripts\config
中修改webpack.config.dev

          {
            test: cssRegex,
            exclude: cssModuleRegex,
            use: getStyleLoaders({
              importLoaders: 1,
              modules: true,// 加入modules: true

}), },

 

引入 react-app-rewired 並修改 package.json 里的啟動配置:
npm install antd-mobile --save

npm install react-app-rewired --save-dev
然后在項目根目錄創建一個 config-overrides.js 用於修改默認配置。
使用 babel-plugin-import, babel-plugin-import 是一個用於按需加載組件代碼和樣式的 babel 插件（原理），現在我們嘗試安裝它並修改 config-overrides.js 文件。
npm install babel-plugin-import --save-dev

安裝完所有的包之后
並修改 config-overrides.js 文件
 const { injectBabelPlugin } = require('react-app-rewired');
 module.exports = function override(config, env) { 
 config = injectBabelPlugin(['import', { 
libraryName: 'antd-mobile', style: 'css' }], 
config);
 return config; };

修改/* package.json */

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

 

這時候發現 antd-mobile 的樣式無法加載

這是修改    webpack.config.dev

 

 重啟之后就可以使用了