Thank you for your attention and your help! I really do appreciate it!
I use PhpStorm and node.js.
Can you please describe as simple as possible how to install globally PostCSS and Autoprefixer using terminal and configure PhpStorm's file watcher? I don't need to use gulp or webpack. I have a small project.
I tried different ways, but it doesn't work. PhpStorm generates a new .css file, but it doesn't contain prefixes.
I used
https://github.com/postcss/postcss and
https://github.com/postcss/autoprefixer
p.s. I tried to do it by myself for about several weeks...
Related
I am new to SCSS. I love using SASS for my local development, but when I publish a client’s website and need to make a change, it’s a pain to have to dig out the old project and set everything up so I can edit locally and then publish those changes on the production site.
Currently, I make changes in the SCSS file and then I go to online SCSS to CSS converter tool and convert SCSS to CSS and then put that CSS into CSS file.
Is there any way that if I make a change in the SCSS file in the server then it should directly update the CSS file?
Currently, I use HTML, CSS, SCSS, and Javascript
Thanks,
Use sass package instead of VSCode Extensions like Live SASS Compiler.
Why should not we use "Live SASS Compiler" VSCode extension?
Live SASS Compiler extension is old and hasn't been updated for a while.
Some features like #debug, #warn, #error won't work, so if you are using it, you have to use the sass npm package for that.
So, How to install the sass package?
So simple, just run these commands.
npm install -g sass
And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css
More information is available on the sass docs here
Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki
Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.
Install sass package:
npm install sass --save-dev
Learn more about the package and its CLI
In the package.json file's scripts section, add these:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/css"
},
Run scripts:
npm run sass-dev
// or
npm run sass-prod
What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.
The above is a very basic setup to compiling SCSS files and "watching" them for changes. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.
I am trying to use sass styling and Live Sass Compiler extension, I recently installed it and now keep getting a extension host terminated unexpectedly error using VS Code.I have re-installed Live Sass Compiler several times as well as all my Live extensions and restarted my VS Code. Live Extensions I've re-installed. I know its the Live Sass Compiler causing this issue, because once I uninstall, I don't see the error anymore, but I can't update any styling in my . scss files. Everything is up to its current version.
How can I keep using Sass if this extension isn't working? Sass extension error Thank you!
This has been bothering me for so bloody long... Turns out (for me anyway) it was the extension "Color Highlight" that was causing it to crash. I'm going to be very careful downloading random extensions in the future..
for my situtation it blocks me only when I import a partial scss file so disabled it and only enable it when i have no more partial files to import.
color highlight is very useful for me.
or you can use the npm module "node-sass" with the flag -w
This is the exact issue I'm facing currently while using the "Live Sass Compiler". Whenever I try to edit any "#import" lines it just gives me the error.
See this image ... Extension host termination error!
Problem:
I'm facing this issue only while using the "Live Sass Compiler" as you can see in the screenshot ... Error in detail. This is similar to the one you're getting.
Quick Fix:
There must be some interruptions in the process due to which the extension is causing this error. Now, continue using the sass compiler and getting rid of that error I would suggest you uninstall the "Live Sass Compiler" and instead use npm install node-sass --save-dev to install the node-sass compiler as a dependency. Now in package.json enter the required script for node-sass to run.
This will allow you to compile .scss files to css. For more info checkout this link "https://www.npmjs.com/package/node-sass".
Hope you got your answer,
Cheers!
have a problem with gulp. I've been using gulp for 3 months. And for the first time a have an issue like this:
When I try to run gulp, command line shows: no gulp file found. I use node, and I got project from my friend to fix code. Thank, U!
gulp is telling you that it doesn't have a gulpfile with instructions for it to follow. Please make sure you were in correct directory that contains gulpfile.js. It will be better if you could show your project structure here.
I want to know what is exact use of npm, grunt etc. in front-end development?
Why and how to use it?
NPM is a Node Package Manager - you can think of it as a way to automate a lot of installations for you by a single command using the CL (command line). Otherwise you would have to install all the scripts manually, which is generally rather messy, since they are often not as user-friendly as say... game or standard program installations.
Grunt/Gulp/Broccoli/etc. - While I am not using it myself, from what I heard and read: It is a tool, that can help you automate numerous tasks, you would have to normally do manually. Anything ranging from compiling any CSS/HTML/JS preprocessor, concatenating different files together into one big file, watching for changes in files to automatically upload them to a server and so on. Basically it is a highly configurable tool meant to help you automate mundane and boring tasks.
Actually, NPM is a package manager what allows you to download a lot of packages of software such as Gulp and Grunt, but also Bootstrap etc with the command line. You have to install node.js for this. You don't need this as a front-end developer but it will make installing the software much easier than install it manually which take mostly more time.
https://docs.npmjs.com/getting-started/what-is-npm for npm
https://www.npmjs.com/browse/star for popular modules
Software such as Grunt and Gulp will help front-end developers mostly with compiling SASS and LESS, CSS preprocessors which saves you time and allows you to have more functions in your css. Grunt, Gulp etc runs in the command line and makes it easier to edit your files. For example, I use myself Gulp in combination with SASS. Because SASS has to compile to css I have set up a command which automatically compiles my SASS files to a CSS file if I hit the save button in my code editor, the SASS:Watch plugin.
I highly recommend using SASS, and so using Gulp or Grunt.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html SASS documentation
http://gulpjs.com/ Gulp documentation
http://gulpjs.com/plugins/ plug ins for gulp
I am currently creating a portable consolidation of my workflow using Node-Webkit which has node.js embedded. Now my problem is getting grunt/gulp inside the project itself as it depends on the cli somewhat(avoidable, granted), and also is confusing to me on the architecture. Is it possible to find just a .js with grunt in it to include much like Jquery/Handlebars?
Is this all I need to just include and run?
No before that make sure you environment is up, get the package.json, GruntFile.js file. In GruntFile.js you can specify what you want to pre-process. For example jade,Less,coffee. It looks very much like a node function, for sample you can refer to link
Now to make this work you also need to install various contrib plugins as per your requirement. Then register every single task in GruntFile.js. It really speeds up the development.
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('test', ['jade', 'less','coffee']);
So to process less,jade,coffee, we need to run the module installations such as
npm install grunt --save-dev
npm install grunt <module name> --save-dev
There are many more interesting configurations to learn and documentation is really nice, please refer to getting started guide
This adds the required Grunt and grunt plugins to package.json