Comments (13)
@mrtysn I would copy the css file to libs in "src/resources/css/libs/semantic.min.css" all files in resources are imported via loaders and without modification of name i.e. localIdentName=[local] thus not changing its implementation. Then you can directly use the css classes in the application.
However I would recommend not to do that and use the css in component isolated whenever possible. This reduces the size of common style and loads the css in required module only.
from react-pwa.
Thank you for the answer. I am using Semantic as a global framework, therefore I need it in almost every component. As explained here, the CSS is distributed via their CDN or an npm package. So, copy-pasting would mean regularly checking if they released a new version or not. Since that is not an optimal way of doing it, I would very much prefer if I could directly import it the same way I did it in create-react-app previously, that is:
import 'semantic-ui-css/semantic.min.css';
in index.js.
The problem is, this CSS file also contains ttf,woff,woff2 thus css-loader fails to load it. Any solutions for such use cases? I believe many people are using a global UI framework and including its CSS so this is a common problem for this react-pwa project.
from react-pwa.
@mrtysn Yes I can think we can specify that using anything from node_modules should be treated same as we do with src/resources/libs, That should solve the problem. Let me create a commit for you tomorrow (pretty late here past midnight). If that works for you, I shall add it to master branch and next release.
Does that work ?
from react-pwa.
Of course, that would be great! We really like the project so far, thank you for the work.
If we can smoothly migrate our existing project and solve the further problems that have not occurred yet, we are considering to drop create-react-app in favor of react-pwa. We would also be happy to back the project if you'd help us solve such performance issues.
I am keeping this issue open for now, until it is resolved.
from react-pwa.
I know Stack Overflow has become quite the troll farm these days. Perhaps there's room for a free Discord server as this repo gains mindshare and popularity, to help keep the repo clean of help requests.
from react-pwa.
@mrtysn I have pushed the changes to master and tested it with Semantic-UI-CSS with simple
import 'semantic-ui-css/semantic.min.css';
if you want it globally then use the import in src/client.js, that will include the semantic css in common bundle. thus you can use it whole application.
from react-pwa.
@mrtysn Ok. The build is yarn test
- ed. Let me know if this solves the problem of css include from node_modules.
@jhabdas I updated this cause many would like to use 3rd party plugins and css via node_modules and totally made sense.
from react-pwa.
@tirthbodawala Hi Tirth, importing css still gives error:
ERROR in ../node_modules/semantic-ui-css/semantic.min.css
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve 'themes/default/assets/fonts/icons.eot' in '/home/coldwhistle/dev/react-pwa/node_modules/semantic-ui-css'
Can you provide a working example?
from react-pwa.
@mrtysn how are you importing it? in css? or in client.js?
from react-pwa.
@tirthbodawala, I am working with the latest commit in the master branch.
. I've installed semantic-ui-css & semantic-ui-react as devDependencies.
. Added import "semantic-ui-css/semantic.min.css";
to src/client.js
Both yarn start and yarn build fails
from react-pwa.
For anyone who are still facing the issue, please do not include minified version of css from node_modules,
In this case do not include "semantic.min.css" but use "semantic.css"
There are path resolution issues with menified css.
from react-pwa.
@tirthbodawala has this issue been resolved? currently hitting it right now, was there ever a workaround created?
from react-pwa.
@EvanBurbidge We are launching react-pwa v2 that would solve the issue. please stay with us a bit longer. It is a very big change.
from react-pwa.
Related Issues (20)
- Upgrade guide required HOT 5
- not able to start server, installation was successfull HOT 2
- npm start not working HOT 3
- npm start fails on Windows. HOT 3
- build, missing index.html HOT 1
- deployment guide on heroku HOT 1
- θΏθ‘ζ₯ι HOT 2
- React Confusion HOT 1
- 500 (Internal Server Error) HOT 5
- "npm start" is not working HOT 10
- Issue while npm start HOT 1
- reactpwa.com - host access Error 520 HOT 2
- chokidar.js 'return' outside of function HOT 2
- How To Build APK File For Android & IOS ? HOT 1
- Getting CSS problem on windows 10 OS HOT 1
- There is not sufficient document to start project HOT 3
- npm start on your homepage should be npm run dev
- npm run dev failed to start - Could not find a declaration file for module '@reactpwa/core/start HOT 1
- How can i change the html and body class and add stuff to the head element
- Documentation update. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pwa.