關于react+antd樣式不生效問題的解決方式

3403771864 發布于2022-09-13 22:19 / 1571人閱讀

　　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項目默認的配置文件是不顯示的，需要運行指令“yarn eject”暴露配置文件
　　運行時又遇到問題2
　　解決完問題2后
　　解決1的方法是在webpack.config.dev.js和webpack.config.prod.js文件添加相關配置,然后引入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,
　　},
　　//此{}為添加行?。。。。。。。。。。。。。。。。。?！
　　{
　　loader:'less-loader',
　　options:{
　　javascriptEnabled: true
　　}
　　},

　　代碼運行，出現報錯看問題3

　　報錯：Less Loader has been initialized using an options object that does not match theAPIschema

　　2、運行yarn eject時暴露配置文件報錯

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

　　git add .
　　git commit -am "Save before ejecting"
　　然后再運行就可以了

　　這樣的webpack文件中就有了

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

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

　　再運行，代碼成功運行

　　4、項目中引入icon代碼報錯

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

　　Ant Design 從 v3 升級到 v4 導致

　　圖標升級（點擊可查看文檔），舊版 Icon 使用方式將被廢棄，你將仍然可以通過兼容包繼續使用：

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

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

　　按照antd官網文檔，執行按需加載操作后，樣式不生效，很可能是因為在webpack.config.js文件中設置了css模塊化；

　　解決辦法：

　　在終端中執行

　　npm run eject

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

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

以上就是全部內容，請大家多多關注。

GPU云服務器云服務器關于樣式的解決TPM不支持問題關于javascript的問題關于php的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127702.html

可能是你見過最完善的微前端解決方案

摘要：而從技術實現角度，微前端架構解決方案大概分為兩類場景單實例即同一時刻，只有一個子應用被展示，子應用具備一個完整的應用生命周期。為了解決產品研發之間各種耦合的問題，大部分企業也都會有自己的解決方案。原文鏈接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...

Kahn 2019-08-26 14:04 評論0 收藏0
webpack工程化集成React技術棧（一）

項目開始前，我們先聊一聊關于項目的一些說明。該項目起始于2017年初，當時公司主要技術棧為gulp+angular，鑒于react的火熱的生態，在公司決定研發bss管理系統時選用react開發，目的也是為react native打下基礎，以解決后期公司大前端技術棧的逐步成熟。（當時沒有選擇vue開發的主要原因是weex生態還不夠特別成熟），既然決定換新，項目的構建也跟著一起換，從gulp轉向火熱的...

tianhang 2019-08-22 14:47 評論0 收藏0
通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

Cympros 2019-08-02 16:02 評論0 收藏0
通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

CoyPan 2019-08-22 18:05 評論0 收藏0
實現antd的按需加載

摘要：使用來進行按需加載安裝關于插件的介紹和使用，可參考使用這個插件之后仍然可以用來引入組件，但是這個時候插件會幫你轉換成的寫法。另外此插件配合屬性可以做到模塊樣式的按需自動加載。引言 create-react-app：是一個創建react項目特別方便的腳手架，他幫我們配置好了各種需要使用的工具，減少了很多工作量。antd：是螞蟻金服推出的一個很優秀的react UI庫，其中包含了很多我...

0xE7A38A 2019-08-23 12:02 評論0 收藏0