zoukankan      html  css  js  c++  java
  • antd遇见的坑

    yarn add less

    yarn add less-loader

    通过命令yarn eject,暴露出webpack文件

    在config->webpack.config.js中添加,对照sass变量的定义,写less

     1 const lessRegex=/.less$/
     2 const lessModuleRegex=/.module.less$/
     3 
     4 {
     5   test: lessRegex,
     6   exclude: lessModuleRegex,
     7   use: getStyleLoaders(
     8     {
     9       importLoaders: 3,
    10       // sourceMap: isEnvProduction && shouldUseSourceMap,
    11       sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    12     },
    13     'less-loader'
    14   ),
    15   sideEffects: true,
    16 },
    17 {
    18   test: lessModuleRegex,
    19   use: getStyleLoaders(
    20     {
    21       importLoaders: 3,
    22       // sourceMap: isEnvProduction && shouldUseSourceMap,
    23       sourceMap:isEnvProduction?shouldUseSourceMap:isEnvDevelopment,
    24       modules: true,
    25       getLocalIdent: getCSSModuleLocalIdent,
    26     },
    27     'less-loader'
    28   ),
    29 },

    保存配置,然后

    yarn add babel-plugin-import

    package.json

     1 "babel": {
     2   "presets": [
     3     "react-app"
     4   ],
     5   "plugins": [
     6     [
     7       "import",
     8       {
     9         "libraryName": "antd",
    10         "style": "css"
    11       }
    12     ]
    13   ]
    14 }

    webpack.config.js

     1 {
     2   test: /.(js|mjs|jsx|ts|tsx)$/,
     3   include: paths.appSrc,
     4   loader: require.resolve('babel-loader'),
     5   options: {
     6     customize: require.resolve(
     7       'babel-preset-react-app/webpack-overrides'
     8     ),
     9 
    10     plugins: [
    11       [
    12         require.resolve('babel-plugin-named-asset-import'),
    13         {
    14           loaderMap: {
    15             svg: {
    16               ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
    17             },
    18           },
    19         },
    20       ],
    21       ['import', { libraryName: 'antd', style:"css" }],
    22     ],
    23     cacheDirectory: true,
    24     cacheCompression: isEnvProduction,
    25     compact: isEnvProduction,
    26   },
    27 },
  • 相关阅读:
    shell管道和重定向
    shell脚本
    Hexo学习笔记--常用命令及部署步骤
    Git学习笔记--Git常用命令
    Spark link集合
    Struts2学习笔记--Struts2的体系结构
    JNI错误记录--JNI程序调用本地库时JVM崩溃
    Hibernate学习笔记--使用ThreadLocal
    Hibernate学习笔记--核心编程
    Hibernate学习笔记--映射配置文件详解
  • 原文地址:https://www.cnblogs.com/ronle/p/10651821.html
Copyright © 2011-2022 走看看