【DvaJS】Dva+Antd+Sass

根据上一篇【DvaJS】初识DvaJS，已安装 dva-cli。

安装

安装 node-sass 和 sass-loader 之后不需要修改任何代码即可使用，antd 还需额外配置。详情请查看官网API https://dvajs.com/guide/getting-started.html#%E4%BD%BF%E7%94%A8-antd, 既添加 babel-plugin-import, 可见【使用 Antd】。

1 2	// npm i node-sass sass-loader antd --save cnpm i node-sass sass-loader antd --save

使用 Antd（2选1）

通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的，详见【按需加载】。

1	npm install antd babel-plugin-import --save

编辑 .webpackrc，修改成 .webpackrc.js 使 babel-plugin-import 插件生效。

// {
//   "extraBabelPlugins": [
//      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
//   ]
// } 

// .webpackrc.js 添加完需要重启服务 npm start
export default {
  extraBabelPlugins: [
     ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
  ]
}

注：dva-cli 基于 roadhog 实现 build 和 dev，更多 .webpackrc 的配置详见 roadhog#配置

按需加载（2选1）

如果你在开发环境的控制台看到下面的提示，那么你可能使用了 import { Button } from ‘antd’; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。

1 2	You are using a whole package of antd, please use https://www.npmjs.com/package/ babel-plugin-import to reduce app bundle size.

babel-plugin-import

可以通过以下的写法来按需加载组件。

1 2	import Button from 'antd/lib/button'; import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件

antd/es/button可以加载 ES 版本的模块，方便进一步 Tree Shake。

如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载，加入这个插件后。你可以仍然这么写：

1	import { Button } from 'antd';

插件会帮你转换成 antd/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

注意: babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'antd/dist/antd.css' 手动引入，并覆盖全局样式。

赏

支付宝打赏

微信打赏

欣赏此文，打赏一下

安装

使用 Antd（2选1）

按需加载（2选1）

标签

参与社区