快捷導(dǎo)航

關(guān)于react+antd樣式不生效問題的解決方式

更新時(shí)間：2022年07月14日 10:10:58 作者：Sunny_lxm

最近本人在使用Antd開發(fā)時(shí)遇到些問題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問題的解決方式,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、添加antd組件樣式不生效
2、運(yùn)行yarn eject時(shí)暴露配置文件報(bào)錯(cuò)
3、less-loader版本過高，刪除舊版本，下載低版本即可
4、項(xiàng)目中引入icon代碼報(bào)錯(cuò)
補(bǔ)充：React中antd按需加載樣式不生效解決辦法
總結(jié)

1、添加antd組件樣式不生效

在入口文件中引入import 'antd/dist/antd.css'
樣式生效，但是生成警告
WARNING in ./node_modules/antd/dist/antd.css
Failed to parse source map: 'webpack://antd/./components/time-
picker/style/index.less' URL is not supported
 
這樣就需要在webpack中配置，react項(xiàng)目默認(rèn)的配置文件是不顯示的，需要運(yùn)行指令“yarn eject”暴露配置文件
運(yùn)行時(shí)又遇到問題2
 
解決完問題2后
解決1的方法是在webpack.config.dev.js和webpack.config.prod.js文件添加相關(guān)配置,然后引入antd.less
暴露出webpack配置后，在webpack.config.js 中更改配置如下
// style files regexes
const cssRegex = /\.(css|less)$/;//此行為更改行?。。。。。。。?！
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
 
const hasJsxRuntime = (() => {
  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
    return false;
  }
 
  try {
    require.resolve('react/jsx-runtime');
    return true;
  } catch (e) {
    return false;
  }
})();
 
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';
 
  // Variable used for enabling profiling in Production
  // passed into alias object. Uses a flag if passed into the build command
  const isEnvProductionProfile =
    isEnvProduction && process.argv.includes('--profile');
 
  // We will provide `paths.publicUrlOrPath` to our app
  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
  // Get environment variables to inject into our app.
  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 
  const shouldUseReactRefresh = env.raw.FAST_REFRESH;
 
  // common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
     //此{(lán)}為添加行?。。。。。。。。。。。。。。。。。。?
      {
        loader:'less-loader',
        options:{
          javascriptEnabled: true
        }
      },

運(yùn)行代碼，后又遇到報(bào)錯(cuò)看問題3

報(bào)錯(cuò)：Less Loader has been initialized using an options object that does not match the API schema

2、運(yùn)行yarn eject時(shí)暴露配置文件報(bào)錯(cuò)

This git repository has untracked files or uncommitted changes: .DS_Store

git add .
 
git commit -am "Save before ejecting"
 
然后再運(yùn)行就可以了

這樣的webpack文件中就有了

3、less-loader版本過高，刪除舊版本，下載低版本即可

yarn remove less-loader 
 
yarn add less-loader@4.0.1

再運(yùn)行，代碼成功運(yùn)行

4、項(xiàng)目中引入icon代碼報(bào)錯(cuò)

export 'Icon' (imported as 'Icon') was not found in 'antd'

Ant Design 從 v3 升級(jí)到 v4 導(dǎo)致

圖標(biāo)升級(jí)（點(diǎn)擊可查看文檔），舊版 Icon 使用方式將被廢棄，你將仍然可以通過兼容包繼續(xù)使用：

import { Icon } from '@ant-design/compatible';
 
運(yùn)行時(shí)如果沒有安裝包，運(yùn)行指令 yarn add  @ant-design/compatible
 
再重新運(yùn)行代碼就可以了

補(bǔ)充：React中antd按需加載樣式不生效解決辦法

按照antd官網(wǎng)文檔，執(zhí)行按需加載操作后，樣式不生效，很可能是因?yàn)樵趙ebpack.config.js文件中設(shè)置了css模塊化；

解決辦法：

在終端中執(zhí)行

npm run eject

彈出config文件夾后，找到webpack.config.js文件

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,//在這行后面添加 modules:false
                modules:false,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              }),