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?
Related
Here I have a javascript file that's the result of bundling and obfuscation. The vendor doesn't provide it as an npm package, but in a zipfile via email.
If it were an npm package, I think it would work fine because I guess NextJS build will not try to run babel on node_modules (default exclude for babel-loader).
If I put it at public/acme.js that would be fine for any html including it. But for our project's typescript code, importing it from ../public seems odd, and if it's located anywhere else it will get processed by babel, which seems odd since it already has been.
There's an npm feature to install a package from local files, however it doesn't seem like that would work in our CI pipeline.
Is there a way to add paths to the exclude part of the babel-loader rule? I see in the doc how the option.defaultLoaders.babel is used as an input to create another rule, but it's not clear that this could be mutated, or if it supports an exclude.
I'm developing a progressive web app using Vue.js.
While I'm developing I use the command npm run dev to start the local server which serves the files on http://localhost:8080/. When I want to build for production I use npm run build prod which generates the output files in project\dist. I then take those files and copy them onto an ISS which is configured to work with single-page applications. All good so far.
I noticed some differences in the way the app looks (css) between the dev and prod build. First I thought this might be because of a client side cache, but after several tries to clean the cache and no-cache loading I'm sure that caching is not the issue here. The output really is different.
To be honest, I'm not sure if there is anything else different besides a few minor css parts. I was thinking what might be the issue, one of the things I noticed that could be the cause is that I use single file components in vue with scoped css (*.scoped.vue.css file names). I guess there could be an issue combining the different files into a single one?
It might be noted that I'm quite a newby when it comes to npm, webpack and all the other involved technologies. If you want to take a look at the configuration, you can find my current working branch build configurations here.
Any idea what the issue might be?
I encountered the same problem when using single file components. The issue indeed seems to be that when you run npm run build it will generate one single css file without the guarantee that the styling will be applied in the same order, causing some property values to be ignored. I 'fixed' it by adding !important to the properties that weren't matching up in the final build. There's probably a better way to handle this, but I must admit I too am quite a newby.
The order of how styles are applied while npm run build matters, and is to my knowledge out of (y)our control. To get rid of conflicts, when using Vue.js, you may want to scope your styles.
In every *.vue file within your project, replace
<style>
...
</style>
With
<style scoped>
...
</style>
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
I'm building a meteor app with meteor-angular2 package. But with .css it's quite unfunny so far.. As soon is try to import a css file in a component, meteor is "modules-loader" is telling that this is not a module i'm trying to import (true basically :D)
Now i'm fiddling around with a basic webpack+ng2 setup and i can get it easily running with direct imports of .css files in typescript - just because i can configure the webpack loaders correctly (you can even get css-modules in this way with ng2!)
So, in the docs of the latest meteor angular2 package release it is somwhere written that it is basically packing all the stuff with webpack.
What's the right way to modify this underlaying webpack config? Is it even possible? Do i have to fork the package repo to change it? At a first shot i didn't find the webpack stuff in there..