前端 / react
2 分钟 读完 (大约 245 个字)

react中自定义antd主题与支持less（第二部）

自定义主题

首先自定义主题需要修改antd，antd本身也是less写的之后编译成css的，所以当我们需要使用less。

1.yarn add react-app-rewire-less –dev

1
2
3
4
5
6
7
8
9
10
11
const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');

  module.exports = function override(config, env) {
-   config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
+   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
+   config = rewireLess.withLoaderOptions({
+     modifyVars: { "@primary-color": "#1DA57A" },
+   })(config, env);
    return config;
  };
阅读更多
前端 / react
2 分钟 读完 (大约 262 个字)

react中antd+css Module一起使用

antd 和 css modules 不能混用,针对antd的css 单独写一条loader的规则,不开启 css modules。

使用 exclude 和 include 配置参考https://segmentfault.com/q/1010000011223900,修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件 (尽量不要使用less-loader 来处理css文件，在与antd一起使用时可能出现错误，单独写一条规则)，所以我们只能两个来处理css的loader。

阅读更多
前端 / react
几秒 读完 (大约 56 个字)

react中create-react-app配置antd按需加载（方法二）

1.yarn add babel-plugin-import

2.在根目录下的package.json下的bable中添加相应代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
           // 引入样式为 css
           // style为true 则默认引入less
        }
      ]
    ]
  }

3.重启项目yarn run start

前端 / javascript
几秒 读完 (大约 96 个字)

javascript中new url()属性，轻松解析url地址

1.首先写一个假的地址（q=URLUtils.searchParams&topic=api）相当于当前的window.location.href

阅读更多
前端 / react
4 分钟 读完 (大约 609 个字)

react中关于create-react-app2里css相关配置

先看 webpack.config.dev.js 里的相关代码：

阅读更多
关注我

链接

分类

标签云

javascript react typeScript vue 微信小程序

最新文章

归档

标签

javascript 14
react 21
typeScript 3
vue 19
微信小程序 3

最新文章

归档

标签

javascript 14
react 21
typeScript 3
vue 19
微信小程序 3
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×