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.
Related
I am learning about sass and I am wondering how we should give a link in our CSS stylesheet. I know sass files are stored differently but should we address it like this:
<link rel="stylesheet" href="mystyle.css" />
and then add a link to mystyle.scss then?
TL;DR: You cant use precompiled Style in your DOM.
SASS is a scripting language written in Ruby. You must compiled first because by default your browser understand only CSS. If you want that your browser compile your SASS files your can use some Libraries which compile your style to CSS. For example: https://github.com/slymax/sass-link
But regular you compile your SASS File first on your machine and then you link only to the CSS.
SASS cannot be directly linked via a stylesheet. It is a CSS preprocessor and is compiled down to regular css. You'll wanna install sass using npm (npm i sass) and do npx sass --watch scss:css for it to compile. (here scss is the sass directory and css is the css directory, it may be different for you). If you do npm i sass -g you wont need to include the npx since you installed it globally. You can then simply link your css to your index.html.
In the end you're always connecting your .css file to your style sheet. Never the scss/sass file itself.
You could use the VSCode (or any other IDE) Sass compiler plugin. But I prefer to do it manually as the compilers sometimes result in bugs for me.
I personally do the following:
In your terminal enter the following to install in your project directory:
npm install sass --save(previously dart-sass)
npm install bootstrap --save
npm install autoprefixer
or in one line:
npm install sass bootstrap autoprefixer --save
Within your project root create a "scss" folder, and within that, a file named "styles.scss"
This will be the file from which all imported sass is compiled into your destination.css file.
Then, you must create a script in your package.json to the scripts. I use the following:
"compileSass": "sass --watch scss:public/css"
Please note that the --watch means that whenever you save your modified.
Please note that the public/css dictates where the compiled file will be saved relative to your scss folder you just created.
In a new tab in your terminal, start your compiler by entering
npm run compileSass
Or whatever name you gave to your script in the package.json file.
THEN when you link your CSS file as a stylesheet it will be the compiled CSS that was generated from your styles.scss.
You should put all the file path.
Exemple :
<link rel="stylesheet"href="C:\Users\Name\Documents\HTML & CSS\style.css" />
For sass it's easy : How to import SCSS files into HTML files
the errror is 'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
ive tried
npm install
npm install react-scripts --save
npm i -g react-scripts
https://github.com/mareyam/Complete-Maryam-s-Restaurant
i uploaded this code on github without .json file
now im trying to donwnload and use it but cant because ,json file ive lost. ive tried using json file from anothr project but not working
I would recommend using create-react-app to build this project. Run the command, cd into the directory then start the app.
npx create-react-app name_of_app
cd name_of_app
npm start
This will be good enough for development, and you can add all your components into the src/ folder. Here's the documentation for how to start building react web apps.
To get the production build (which I think is what you're trying to go for), run npm run build which will save the build in the build/ folder.
Any time you use a different machine, just pull the project from github and run npm i. I'm assuming that you were talking about the package.json file. This shouldn't be a big deal if you set everything up correctly.
I'm constantly working on new web development projects that don't ever, in practice, need their node_modules folder when deploying. It would suit me much more if I was just able to create a small gulpfile.js for each project, rather than 6000+ files contained in the node_modules folder for every project, that are only ever used by me on this machine.
I only use Gulp to compile SASS and prefix and minify my CSS. I don't need to worry about any other type of deployment issues, but the documentation says I need both: Global and local copies of Gulp.
Gulp needs to be installed locally, but you can link the local install to a global install:
npm install --global gulp
npm link gulp
See also https://stackoverflow.com/a/30742196/451480
I'm getting started with WebStorm 9. I created an HTML 5 Boilerplate project and I noticed a src and a dist folder.
Is there a standard command to compile the content of the src folder into the dist folder?
This is how my project looks like:
It looks like HTML5 Boilerplate comes with a gulpfile.js file, so it looks like it wants to use Gulp to build assets from src into dist.
If you have Gulp installed, you can run gulp build in your project directory.
If you don't have Gulp installed, you should install it with npm. HTML5 Boilerplate has a package.json file that includes Gulp, so install npm and then run npm install in your project directory, and that should install everything that HTML5 Boilerplate expects.
If you are using webStorm: just right click the package.json, you will find something like run npm install. It will do everything for you. After this right click the gulpfile.js file, and choose show Gulp tasks. Then you will find what you can do in Gulp window.
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