Seperate Css for each modern page, is this possible ?

[mvcsharepointdev]

Can we use this React application to inject separate custom css inside modern pages, instead of just having the same css injected inside all the modern pages?

Thanks for providing such a great application

[hugoabernier]

I'm glad you like it.

I'm sure you could tweak the existing code to do that, but if you need to inject css on a page, try this web part :

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting

I hope this helps?

[mvcsharepointdev]

@hugoabernier Ok thanks for the link, so is the react-enhanced-list-formatting webpart intended for customizing the list formatting? or i can use it to define custom css for our modern pages, for example to change the font color for some modern web parts text?

[hugoabernier]

Yes, it can inject css. Although it was designed for last formatting, it is merely a css injector for the page.

There is a huge disclaimer (changing css is not supported, as you know) but it'll do the trick

[mvcsharepointdev]

@hugoabernier yes i already acknowledge the customer about this risk, that injecting css inside modern pages might break if Microsoft update the modern pages html elements,,, and they are happy to accept this risk

[mvcsharepointdev]

@hugoabernier i tried to install and use the web part inside my PC, but I got some errors:-

`D:\SPFxWebParts-master>cd D:\s\sp-dev-fx-webparts-main\samples\react-enhanced-list-formatting

D:\s\sp-dev-fx-webparts-main\samples\react-enhanced-list-formatting>npm install

deasync@0.1.19 install D:\s\sp-dev-fx-webparts-main\samples\react-enhanced-list-formatting\node_modules\deasync
node ./build.js

D:\s\sp-dev-fx-webparts-main\samples\react-enhanced-list-formatting\node_modules\deasync>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS checking VS2019 (16.7.30621.155) found at:
gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2019\Community"
gyp ERR! find VS - "Visual Studio C++ core features" missing
gyp ERR! find VS checking VS2017 (15.9.28307.1525) found at:
gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools"
gyp ERR! find VS - "Visual Studio C++ core features" missing
gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack at VisualStudioFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16
gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
gyp ERR! stack at ChildProcess.exithandler (child_process.js:326:5)
gyp ERR! stack at ChildProcess.emit (events.js:376:20)
gyp ERR! stack at maybeClose (internal/child_process.js:1055:16)
gyp ERR! System Windows_NT 10.0.19043
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd D:\s\sp-dev-fx-webparts-main\samples\react-enhanced-list-formatting\node_modules\deasync
gyp ERR! node -v v14.17.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
Build failed
npm WARN react-enhanced-list-formatting@0.0.1 No repository field.
npm WARN react-enhanced-list-formatting@0.0.1 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! deasync@0.1.19 install: node ./build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the deasync@0.1.19 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mohan\AppData\Roaming\npm-cache_logs\2021-11-12T16_41_06_828Z-debug.log`

[hugoabernier]

You should check the version of Node on the sample vs what's running on your machine. Or use m365 cli's spfx doctor