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
Related
In my local development environment, everything works as I intended. However in after running yarn build all of my styles are way different. I used create-react-app to set up the project, and I am using regular CSS to style it.
here is my file structure
and here is an example of what I am talking about.
and here
turns out there was nothing wrong with my code I was just zoomed in 500% so embarrassing
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.
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.
We have our Angular 4 app scaffolded with angular cli, using scss as the default styling. We run the app with
ng serve --sourcemap --extractCss -o
To get scss source maps. This works fine, app compiles, runs, source maps work, etc.
However, coming from the Angular1/Gulp/Browsersync world, I am missing the injection of the built css without a full page reload. Currently, whenever I edit a sass file, webpack compiles and reloads the page in Chrome.
Is this the only way to work now? Is there no way to simply force a refresh of the css without a reload (like browsersync did it in the Gulp days)?
This is not exactly the same as CSS injection, but will make your page reload & compile a hell of a lot faster!
With Angular 7 you can follow this guide to enable HMR. (Hot Module Replacement)
It will also make reloading your .ts files very fast!
Small addendum:
I think you can infact load the CSS changed by injection but following this piece of the HMR documentation