everything work fine, but this time I want to push my code to production
using netlify, which is ok in development
but in production isn't get shown
and I know also why:
this is happening because the dist folder is inside .gitignore
but I want to ask if there is way to generate tailwind inside "scripts"
now I have this:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"twcss": "npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch"
},
is there a way to npm run build with npm run twcss && vite build
but && means the same time run two scripts.
but I want to do first the tailwind then vite build
another problem is that tailwind don't exit but continue infinitely
so is will never compile the build if the twcss don't finish
for now the script should run on the build time netlify and not on the development.
and I have this netlify config
that is config correctly CSS js svelte to compile but not tailwind
this happen to me also before.
I believe that in the script of tailwind, delete the --watch flag
❌
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch
✅
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
this edit will make a tailwind exit when compiles everything, and will not wait for upcoming changes.
so it will make this the best choice for production!
in netlify write this command
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css && vite build
so with && (that it will not give bugs anymore now)
with this order:
tailwind
vite build
attention: vite build need to be always at the end
now also the CSS of the tailwind will be minified (inside the same CSS file of svelte),
so it is also production ready. (like the svelte/JS code you tell us before)
why you have --flag without knowing?
yes you have it because you used the example on the tailwind docs,
which is good for development or static websites
because of reloading on every change/class added in html
but like you said is impossible to stop (in netlify)
Related
When I run:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
My output.css gets mostly deleted, and only contains a handful of tailwind css, see image:
I have to run:
npx tailwindcss-cli#latest build ./src/input.css -o ./dist/output.css
to rebuild the file which gets all the tailwind css see:
But when I run:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
it deletes the output.css again!
I've cleared the NPM cache, re-installed Tailwindcss on a new project and it produces the same issue.
Any help would be welcome, just starting out with backend programming!
If you use the build command tailwind iterate over your content and check which styles you are use. The other styles are purged. That is a feature of tailwind and makes sure you don't load all the overhead styles you don't use into the CSS file.
I have a Symfony3 project and want to use SASS for my stylesheets.
I have looked up many pages and found Assetic related threads - but no "real" explanation, how to integrate SASS in a Symfony3 project.
Can't be too difficult, can it?
I would be glad to hear any hint or complete "how to" - thanks a bunch!
I create a separate frontend build process using NPM for this which can handle all images, SASS/CSS, and JS with compression etc. and then add a build step to generate everything.
If you don't have NPM, follow instructions to install: https://www.npmjs.com/get-npm
Initialise the project by running npm init in your project directory.
Install some tools for compiling and compressing:
npm install node-sass --save-dev this compiles SASS to CSS
npm install postcss-cli --save-dev this processes compiled CSS
npm install cssnano --save-dev this minifies CSS and is used as a plugin for postcss
npm install autoprefixer --save-dev this adds moz, webkit and vendor prefixes and is used as a plugin for postcss
npm install npm-run-all --save-dev this isn't strictly necessary but allows you to group commands which is helpful as you add more steps.
Once you've got these dependencies installed, you can add your build scripts. Open package.json and modify the scripts key.
{
"name": "your-project-name",
...
"scripts": {
"build-task:scss-compile": "node-sass --source-map true app/Resources/sass/app.sass -o web/css",
"build-task:css-minify": "postcss web/css/app.css --use cssnano autoprefixer -d web/css",
"build": "npm-run-all -p build-task:*"
},
...
}
You can now run npm run build. build-task:scss-compile will compile your SASS into a single, uncompressed CSS file in the web/css directory which can be linked to in your templates. Then build-task:css-minify will compress it and add any vendor prefixes to the CSS.
You can add more build tasks as mentioned above and chain them in this way. You can also add file watchers and a watch command which will run the build scripts when any watched files are modified.
Don't forget to add node_modules to your .gitignore file.
The reason I opt for a separate process over something like Assetic and leafo/scss as outlined in the Symfony docs is that Assetic filters add a lot of overhead to responses as they compress things on the fly which will slow down development considerably. It also separates concerns between application and presentation and gives you more flexibility to later build on and adapt your front end without touching your application.
EDIT: Here is a gist of a package.json file that will also copy jQuery, FontAwesome, anything in the assets directory including any images or fonts, compile and minify JavaScripts, after checking them for errors and create required directories if they don't already exist and a file watcher for building when files are modified:
https://gist.github.com/matt-halliday/6b9a3a015b7a87c5b165ce1a9ae19c9b
I'm trying to setup Sass in my Angular 2 project. Basically as I understand there are two ways to create an angular 2 project
1) Using angular-cli (https://github.com/angular/angular-cli)
I referred answer mentioned in https://stackoverflow.com/a/41541042/2868352 & I could successfully use scss files in angular 2 project, everything worked great but I couldn't locate the generated css file from scss file in project folder. Could anyone explain the reason why no css file was generated but still it worked?
2) Using quickstart seed (https://angular.io/guide/quickstart)
I couldn't get any information about how to set up sass in quickstart project. Does anyone have any idea about using sass in the quickstart project provided by angular?
Thanks in advance!
[Check edited part at end of this answer in case you are using angular cli]
Explaining how to use sass in 'quickstart seed'(https://angular.io/guide/quickstart)
(https://angular.io/guide/setup#download)
Please follow these simple steps:
Step 1: Setup the quickstart seed
Use the below commands to setup
npm install
npm start
you will see 'Hello Angular' on browser.
Step 2: Install node-sass and sass-loader
Use the commands mentioned below to install
npm i node-sass -S
npm i sass-loader -S
Now you can see both of these added in your 'dependencies' inside 'package.json' file.
Step 3: Create 2 folders for Sass code and Css code
Create two folders with any name in "quickstart-master" folder. In this case for example:
"sass_folder" and "css_folder". Now create a demo file 'demo.sass' and put it inside 'sass_folder'. You can put a simple sass code in this .sass file. It will look like this:
$font-stack: Helvetica, sans-serif
$primary-color: #000
body
font: 100% $font-stack
color: $primary-color
Step 4: Make changes in 'package.json' file
Add scripts to Build and Watch Sass code present in "sass_folder". After compilation, The resulting css code should be stored in "css_folder". After changes the "Scripts" in 'package.json' file should look like this:
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose",
"build:sass": "node-sass sass_folder/ -o css_folder",
"watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
}
Have a look at 'start', 'build:sass' and 'watch:sass' only.
Step 5: Run the application
Now you can run the app by using below command:
npm start
You will see the compiled css code in "css_folder" with the same file name 'demo.css'. It will look like this (In this case):
body {
font: 100% Helvetica, sans-serif;
color: #000; }
Now if you make any change in .sass file it will be reflected to .css file dynamically as the script is watching the code.
If it shows error, Close the .css file when you make any change in .sass file.
Note: For scss code you can follow the same steps. You just have to put .scss file in "sass_folder" in this case.
[edited]
In case you want to use Angular CLI:
At the time of creation of new Angular project use below mentioned cmnds:
For sass:
ng new Demo_Project --style=sass
For scss:
ng new Demo_Project --style=scss
To change the existing style:
ng set defaults.styleExt scss
After this you can use Cli normally.
I can explain you the first one.
If you are using ng serverthe compiled files are saved in a hidden folder in your project.
If you are using ng build, you can see your compiled files in the /dist folder. In this folder you can found your general styles in the file styles.[hashversion].css, but local component styles are included inside main.[hashversion].js by Webpack.
Angular-cli uses webpack, and if you want to learn more about, see Webpack Docs
UPDATE
In the second case, you have to compile sass manually. In the app folder un have a app.component.ts that will be compiled in the same folder to app.component.js by Typescript Compiler. So you have to do the same with sass.
Import the CSS file in the component.
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
stylesUrl: ['app/app.component.css']
})
export class AppComponent { name = 'Angular'; }
Noticed that you cannot use relative path cause everything will be requested from root directory.
Create an app.component.sass and put your styles inside.
Then execute the sass compiler that compiles the app.component.sass to app.component.css
Run the server and it will work.
There are two main scenarios here.
When creating a new Angular CLI project, use CLI command
ng new my-angular-app --style=scss
When an Angular CLI project has already been set up, use CLI command
ng set default.styleExt scss
In case 2, you need to manually convert existing .css files. You can use also use sass or less instead of scss
Check out the full article here.
Using SCSS/SASS/LESS in Angular CLI Project
What I want to do is simply have a tool that can watch and auto prefix my css. Previously I was using pleeease.io, it is very straightforward for beginners like me, after install it through npm, what I need to do is to create an option file(.pleeeaserc), then do
pleeease watch
Afterwards, I can focus on my css, every time I make change to my css file, it gets processed and output.
Unfortunately it seems the author has stopped maintaining it, when I do
npm install pleeease
on my new server I got lots of errors and the installation failed.
I guess it is time for me to learn how to directly use autoprefixer, which I believe pleeease integrates as one of its dependencies.
However, I find the learning curve is a little too much for me: To use autoprefixer, I need to learn PostCSS; and PostCSS usually runs with Grunt or Gulp; to use task runners, I need to know something about npm and node.js. I know these are all useful tools which can save lots of my time, with them I can do much more than just autoprefixing. I will make deep dive into them later but under my current pressure I really need some shortcut like pleeease to get autoprefixer up and running, without having to digest all the documents and articles about PostCSS. I hope I can do something like
[postcss|autoprefixer|something else] watch
under my scss folder and every time I make change to and save input.scss, a output.scss file will be generated.
So I have some questions, in part of my effort on learning PostCSS and/or getting autoprefixer work as easy as possible:
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
5) What is the difference between npm install postcss and npm install grunt-postcss?
"What I want to do is simply have a tool that can watch and auto prefix my css."
Yes you can do this easily with gulp, which you can get up and running in minutes. There are plenty of "getting started" walkthroughs online. You don't really need to know anything about PostCSS to use autoprefixer. This task below will compile all your sass, run autoprefixer and output a corresponding CSS file anytime you save a .scss file:
gulpfile.js
var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
gulp.task('watch', () => {
gulp.watch('src/**/*.scss', ['sass']);
});
gulp.task('sass', () => {
return gulp.src('src/**/*.scss')
.pipe($.sass())
.pipe($.autoprefixer())
.pipe(gulp.dest('dest'));
});
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
The answer to question 5 partly answer this question to what postcss is used for. The other is intended to be ran from the command line. PostCSS-cli is a binary, the other is an NPM package written in Javascript.
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
Yes.
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
It's better to install locally like so:
npm i postcss-cli --save-dev
Then you can use like so:
node_modules/postcss-cli/bin/postcss -c config.json
Or, add a script in package.json like so:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/postcss-cli/bin/postcss -c config.json",
"watch": "node_modules/postcss-cli/bin/postcss -c config.json -w",
"minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json"
},
Note: Relative paths are not required in the scripts section. I put them in to show local usage of postcss-cli. You could simply use:
...
"build": "postcss -c config.json"
...
You can then run:
npm run build
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
Nope. PostCSS-cli can do this:
node_modules/postcss-cli/bin/postcss -c config.json -w
Or, add as script to package.json as can be seen in my example above. Then you just run:
npm run watch
5) What is the difference between npm install postcss and npm install grunt-postcss?
The later is used for gulp, the former is used to build grunt-postcss, postcss-brunch etc.
To use autoprefixer with postcss-cli on the command line you do:
postcss --use autoprefixer --autoprefixer.browsers "> 5%" -o output.css input.css
This is listed in the docs and is pretty easy to follow.
I was struggling with setting up libsass as it wasn't as straight-forward as the Ruby based transpiler. Could someone explain how to:
install libsass?
use it from command line?
use it with task runners like gulp and grunt?
I have little experience with package managers and even less so with task runners.
I picked node-sass implementer for libsass because it is based on node.js.
Installing node-sass
(Prerequisite) If you don't have npm, install Node.js first.
$ npm install -g node-sass installs node-sass globally -g.
This will hopefully install all you need, if not read libsass at the bottom.
How to use node-sass from Command line and npm scripts
General format:
$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css
Examples:
$ node-sass my-styles.scss my-styles.css compiles a single file manually.
$ node-sass my-sass-folder/ -o my-css-folder/ compiles all the files in a folder manually.
$ node-sass -w sass/ -o css/ compiles all the files in a folder automatically whenever the source file(s) are modified. -w adds a watch for changes to the file(s).
More usefull options like 'compression' # here. Command line is good for a quick solution, however, you can use task runners like Grunt.js or Gulp.js to automate the build process.
You can also add the above examples to npm scripts. To properly use npm scripts as an alternative to gulp read this comprehensive article # css-tricks.com especially read about grouping tasks.
If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
Add "sass": "node-sass -w sass/ -o css/" to scripts in package.json file. It should look something like this:
"scripts": {
"test" : "bla bla bla",
"sass": "node-sass -w sass/ -o css/"
}
$ npm run sass will compile your files.
How to use with gulp
$ npm install -g gulp installs Gulp globally.
If there is no package.json file in your project directory running $ npm init will create one. Use it with -y to skip the questions.
$ npm install --save-dev gulp installs Gulp locally. --save-dev adds gulp to devDependencies in package.json.
$ npm install gulp-sass --save-dev installs gulp-sass locally.
Setup gulp for your project by creating a gulpfile.js file in your project root folder with this content:
'use strict';
var gulp = require('gulp');
A basic example to transpile
Add this code to your gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
$ gulp sass runs the above task which compiles .scss file(s) in the sass folder and generates .css file(s) in the css folder.
To make life easier, let's add a watch so we don't have to compile it manually. Add this code to your gulpfile.js:
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
All is set now! Just run the watch task:
$ gulp sass:watch
How to use with Node.js
As the name of node-sass implies, you can write your own node.js scripts for transpiling. If you are curious, check out node-sass project page.
What about libsass?
Libsass is a library that needs to be built by an implementer such as sassC or in our case node-sass. Node-sass contains a built version of libsass which it uses by default. If the build file doesn't work on your machine, it tries to build libsass for your machine. This process requires Python 2.7.x (3.x doesn't work as of today). In addition:
LibSass requires GCC 4.6+ or Clang/LLVM. If your OS is older, this version may not compile. On Windows, you need MinGW with GCC 4.6+ or VS 2013 Update 4+. It is also possible to build LibSass with Clang/LLVM on Windows.
The installation of these tools may vary on different OS.
Under Windows, node-sass currently supports VS2015 by default, if you only have VS2013 in your box and meet any error while running the command, you can define the version of VS by adding: --msvs_version=2013. This is noted on the node-sass npm page.
So, the safe command line that works on Windows with VS2013 is:
npm install --msvs_version=2013 gulp node-sass gulp-sass
npx node-sass input.scss out.css
In Windows 10 using node v6.11.2 and npm v3.10.10, in order to execute directly in any folder:
> node-sass [options] <input.scss> [output.css]
I only followed the instructions in node-sass Github:
Add node-gyp prerequisites by running as Admin in a Powershell (it takes a while):
> npm install --global --production windows-build-tools
In a normal command-line shell (Win+R+cmd+Enter) run:
> npm install -g node-gyp
> npm install -g node-sass
The -g places these packages under %userprofile%\AppData\Roaming\npm\node_modules. You may check that npm\node_modules\node-sass\bin\node-sass now exists.
Check if your local account (not the System) PATH environment variable contains:
%userprofile%\AppData\Roaming\npm
If this path is not present, npm and node may still run, but the modules bin files will not!
Close the previous shell and reopen a new one and run either > node-gyp or > node-sass.
Note:
The windows-build-tools may not be necessary (if no compiling is done? I'd like to read if someone made it without installing these tools), but it did add to the admin account the GYP_MSVS_VERSION environment variable with 2015 as a value.
I am also able to run directly other modules with bin files, such as > uglifyjs main.js main.min.js and > mocha