I am using create-react-app-2, I've recently deployed my app to production (building the react app using npm run build).
I have a number of issues/questions.
My class names are being converted to a form jssxxx. Can you tell me why this is, and which part of the create-react-app is responsible for this? The css-loader?
I'm styling material UI with styled components, and sometimes my styles aren't applied. Where would one start when debugging this in production?
BTW, all the styles seem to be applied in development.
Related
I have a chrome extension, which was working fine during manifest v2. It is a react app using antd styles. I am trying to migrate it to manifest v3 but when antd styles are added to app, since I am injecting the app in websites DOM, the styles gets applied to everything in the websites aswell.
I have tried isolating the same with the help of react-frame-component, but haven't been able to compile antd styles to a single file which I can add in content-scripts in order to be accessible by the frame component.
I am trying with webpack configuration but I am not very well versed with customised compilation and tried with vite aswell, since they have some support for chrome extension through crxjs, but haven't found any example with antd compilation.
If anyone might have any resource to refer to, then it would be very helpful.
I tried customised webpack and vite config, in order to compile all antd styles to a single file, so that I can add that file in the content-scripts which makes it eligible for extension to request. Manifest v3 doesn't allow calling 3rd party sites, otherwise I could have used CDN links to antd styles.
I am currently working on a project where I'm using css modules for each component and for pages containing the components. Apart from this I have a main index.css which just has the layout css and nothing else . I'm using bootstrap and react bootstrap apart from this. When I run npm build I notice that the react bootstrap is loaded but the module.css that I coded isn't, so my page looks horrid without styles. Can you offer any pointers on how I should proceed? Note: it's working perfectly fine running a server on 3000 on npm start and it is only on production that this happens. I am not using any specific webpack.config.js
I am creating a wordpress site with vuejs framework. I am about to put vuejs components into this directory.
wp-content/themes/{theme}/components
The problem is, I can't import vuejs components with ES6 import App from './components/App.vue' functionality.
I tried using CDN but I don't know how importing of components works.
Does anybody know?
the are 2 main solutions for this problem:
(best): compile your project (for example with the vue-CLI) in such a way that all imports used in the project are compiled into simple, browser-readable js files
use the http-vue-loader library to load components directly from the browser (this solution works perfectly, but in terms of performance with many components it is not recommended)
I recently built an application using a Vue/Vuetify frontend and Firebase that involved importing some CSS files (Materialize) as well as some custom style scripts on the vue files themselves (encapsulated by tags).
After running "npm run build" and deploying, for some reason everything is fine (including any Javascript on the Vue pages) except for that any styling I did in the style tags does not show up.
Does anyone know why this is? Does it have to do with using Vue? I'm confused since the Materialize styling still works. I hope this question is clear, thank you!
In my component I have
styles: [require('./hero.component.css')],
And when I build the application
ng build --prod
The styles in that file are not getting in the bundle. Also I can't see the styles running the compiled application.
I also tried
styleUrls: ['./hero.component.css']
Which works in the compiled application, but it does not bundle the styles, instead it adds inline.
Is there a way to bundle component styles and make it work when building in production?
(The application was created with ng new proj)
I got a reply on Github
This works as intended.
If you specify the styles as part of the component then the styles get prefixed with component specific selector and will be inlined into the generated code. This is done intentionally to allow you to have style isolation as well as ability to code split your style-sheets along with your code for more optimal lazy-loading.
So apparently it is not possible to bundle with the generated project, you would need a custom webpack to bundle.
Also using this
styles: [require('./hero.component.css')],
Seems to be a bit dangerous since it works on development, but is not generated on ng build --prod. Using styleUrls works in production as well.