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.
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'm following this tuto: vuejs with webpack. I've never used webpack. I can run the code fine with npm serve. However, when I inspect the resulting hmtl:
Without webpack, I would get:
E.g. just by inspecting a component, I see in which css file those properties were defined. However with webpack, it shows up as inline for everything. In that case, the property comes from myproject/src/css/reset.css.
Is there a way to easily recover that information? Preferably in the console directly?
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
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
I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!