search

hugoabernier / react-application-injectcss

An SPFx extension that injects CSS on every page
38 stars 29 forks source link

Seperate Css for each modern page, is this possible ? #9

Open mvcsharepointdev opened 2 years ago

mvcsharepointdev commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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