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
Related
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 trying out Tailwind CSS in my Blazor WASM project.
Today I use Bootstrap 5 and my workflow is to make the html structure, - run the program and make it it look nice in the browser. Adding bootstrap classes to the html.
Now I want to switch to Tailwind CSS.
I am using the following command to make Tailwind
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
When using hot reload or VS Code live server they detect a change in the razor file and reload and at the same time Tailwind generate a new css file.
Sometimes Tailwind is faster, but most of the time live server / hot reload wins and I don't see the changes.
How can I make the hot reload / live server run after the tailwind update?
I'm not sure this is possible if you do the hot reloading via VSCode. The thing is that those two processes are not linked. You can setup hotreloading via NPM / Yarn usually. Then it has a flow and will execute in the correct order.
One solution could be to only look for changes in the compiled CSS file. Then you could do it via VSCode hotreload.
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 learning my way through Meteorjs and I want to write the styles of my code using sass, I added fourseven:scss plugin to my meteor app with meteor add fourseven:scss and documentation says
Without any additional configuration after installation, this package automatically finds all .scss and .sass files in your project, compiles them with node-sass, and includes the resulting CSS in the application bundle that Meteor sends to the client.
So I created some .scss files in /client/styles/ and I was expecting for the plugin to detect those files and generate a css file that meteor would bundle in the browser, but it doesn't work that way I guess, that means the file will be generated when I build my app? Is there a way to get the compiled files immediately after a change, just like npm compiler packages? thank you.
You can edit a scss.json file in your root folder to show straight where css and scss files should lay.
{
"enableAutoprefixer": true,
"includePaths": [
"path/to/some/sass/folder",
"path/to/another/sass/folder"
]
}
If you starting meteor server he already watch for changes in CSS files and refreshing browser on change without reloading page via Browserify.
Thank for providing the code Adnan Y
I'm using SquishIt and have a .less file which I add to a CSS bundle with the following line
.Add("~/content/styles/dev.less")
This compiles as dev.less.debug.css when I build the solution, however I'd like to be able to just save the .less file and it automatically compiles the css (so I see the change instantly in my browser as I would with a traditional CSS file).
I have looked at a number of extensions to achieve this (such as LessExtension and LessCssForVisualStudio) but these require the file to be added to the bundle as dev.css rather than dev.less. Mindscape Web Workbench does not compile LESS files in its free version so I do not know if it also requires dev.css.
I can't change the link to the file as the project will be worked on across teams, where some won't install an extension and will be happy to build the solution to compile.
Is there and extension that automatically compiles LESS that is built to work with SquishIt?
If you use it on non-production site, I would suggest using less.js (It will render css with js on client-side).
Squishit uses dotless under the hood, so you could use that directly.. either set it up so that you request the less file and a handler returns CSS or you can use the exe to compile on build and also the watch mode... I'm not sure what's best for you, but you can find more information on the dotless wiki (https://github.com/dotless/dotless/wiki/Using-.less)
Web essentials does this job perfectly and its free.
http://vswebessentials.com/