Ant Design

npm install antd --save

index.js -> import 'antd/dist/antd.css';

组件页面 -> import { Button } from 'antd';

npm run build 包大小

按需引入（css）

方案1. 修改webpack.config.js

npm i babel-plugin-import -D

index.js入口去掉css的引入 打包结果如下

方案2. 修改package.json

index.js入口去掉css的引入 打包结果如下

使用less

1.npm install less-loader less -D

2.修改webpack.config.js

	const lessRegex = /\.less$/;
	const lessModuleRegex = /\.module\.less$/;

	{
      test: lessRegex, 
       exclude: lessModuleRegex, 
       use: [{
        loader: "style-loader" // creates style nodes from JS strings
       }, {
        loader: "css-loader" // translates CSS into CommonJS
       }, {
        loader: "less-loader",// compiles Less to CSS
        options: {
          sourceMap: true,
          javascriptEnabled: true,
        }
     }]
     }, 
    {
      test: lessModuleRegex, 
      use: [{
        loader: "style-loader" // creates style nodes from JS strings
       }, {
        loader: "css-loader" // translates CSS into CommonJS
       }, {
        loader: "less-loader",// compiles Less to CSS
        options: {
          sourceMap: true,
          javascriptEnabled: true,
        }
     }]
    }

运行可能报错

原因： less-loader安装的版本过高 解决方案：安装低一点的版本

使用sass

cnpm install node-sass -D

修改antd主题色 - webpack版本

方案1: 修改webpack.config.js 使用antd less的样式

方案2. 修改package.json 使用antd less的样式

2. 修改webpack.config.js

3. 结果

修改antd主题色 - craco版本

• 通过npm run eject保罗配置信息进行修改,对于不熟悉webpack来说会存在风险，建议直接修改CRA的配置信息。

yarn add @craco/craco

修改package.json

在项目根目录创建一个 craco.config.js

yarn add craco-less

修改craco.config.js

修改文件

npm start 重启

结果

配置别名

移动端适配

npm i lib-flexible postcss-px2rem-exclude --save

webpack.config.js

• const px2rem = require('postcss-px2rem-exclude');

• px2rem({remUnit:75,exclude: /node_modules/i})

index.js

• import "lib-flexible";

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

npm start

antd-mobile

cnpm install antd-mobile --save

使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的babel插件

• npm install babel-plugin-import --save-dev

修改package.json

组件使用

结果

使用less

1.npm install less-loader less -D

2.修改webpack.config.js

	const lessRegex = /\.less$/;
	const lessModuleRegex = /\.module\.less$/;

	{
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
      ),
      sideEffects: true,
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
      ),
    },

运行可能报错

原因： less-loader安装的版本过高 解决方案：安装低一点的版本即可