成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

3403771864 / 1609人閱讀

　　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)行，出現(xiàn)報(bào)錯(cuò)看問題3

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

　　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)行就可以了

1.png

　　這樣的webpack文件中就有了

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

　　yarn remove less-loader
　　yarn add [email protected]

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

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

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

2.jpg

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

　　圖標(biāo)升級（點(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,
　　}),

       以上就是全部內(nèi)容，請 大家多多關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127702.html

相關(guān)文章

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

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

    Kahn 評論0 收藏0

  • webpack工程化集成React技術(shù)棧（一）

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

    tianhang 評論0 收藏0

  • 通過create-react-app從零搭建react環(huán)境

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

    Cympros 評論0 收藏0

  • 通過create-react-app從零搭建react環(huán)境

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

    CoyPan 評論0 收藏0

  • 實(shí)現(xiàn)antd的按需加載

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

    0xE7A38A 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<