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.
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
Is there any way to rename/obfuscate CSS selectors in an Angular CLI project? If you look at the HTML of sites like Google or Facebook, you will see randomized CSS names.
I assume this is for many reasons, including and not limited to preventing people from scripting your website by targeting static class names.
I want to do something similar in my app, however I don't see any trivial way to do so. This article shows how to do it with one line using webpack, however Angular CLI doesn't allow any webpack configuration as far as I know.
Is there any solution to this without having to write a custom script, or will I just need to write some kind of custom script? I have no problem doing that, just want to make sure I'm not reinventing the wheel first.
Angular CLI does in fact allow Webpack configuration.
To eject webpack write:
$ ng eject
What this will do is generate a webpack.config.js file for you, which you can edit and customize however you want (add your css rules in it etc...)
But you will not be able to start your project using ng serve, you will have to run npm run build & npm run start for it to work!
Edit: If you want to undo ng eject you will have to edit your .angular.cli.json file and set ejected to false:
"project": {
...
"ejected": false
}
Here's some more info: https://github.com/angular/angular-cli/issues/6302
You could parse your code after the build with rename-css-selectors
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 creating a theme and store from scratch, currently every single time I do a ant all in console every change I've done into the style.css of the theme is erased and goes back to standard CSS.
Any ideas how can I keep my CSS changes even if I do a ant all/ant clean all?
Thanks!
The yacceleratorstorefront extension template provides a process for building a responsive website front end that supports LESS.
Build process will generate a _ui folder that contains the appropriate JS and CSS styling. This process can be started either through Ant or Grunt.
Modify any required storefront files in the _ui-src folder and then generate the _ui folder using ant or grunt build is the recommended approach. Kindly make changes to js or less files which are available in _ui-src folder and build will generate the respective js or css changes in _ui folder.
Check this for more details.
Is there a way to manage the CSS for a Sencha Touch app outside of the framework?
I'm used to working with CodeKit or Grunt to manage dependencies for websites, but with Sencha Touch everything seems to be done within the framework. I'm assuming that as long as everything gets compiled to the resources/css folder then it will be fine. But what about the framework resources? Do they get compiled to the same place or does the app make a separate request for them?
I have no idea of CodeKit or Grunt. Anyways in Sencha Touch all the CSS files get placed to the resources/css folder after the compilation. It's the same even when we add custom CSS files or use SASS with Compass compiler.
I use codekit too.
This is my solution: CodeKit -> Preferences -> (the left side bar) OTHER TOOLS -> Compass
Then select Use the compass executable at this path and choose the path you install compass