I have a "static" directory with SCSS files. I have application components that live in another directory, each of which has an SCSS file.
I'd like to compile all of these files into one .css file in an output directory. One of the "static" SCSS files is a variables file that should be imported into all of the other files. I'd also like to not have to maintain the import paths in each of the components, and more may be added later.
This is the script I've tried, which seems to only find the "static" directory and outputs them as individual css files in output/styles. The documented node-sass commands are pretty light on explanation.
"scss": "node-sass --watch ./my/static/styles ./my/components -o ./output/styles --output-style compressed"
I am going to assume this is not for a React project. If it is for React than there is a really good article here and it is relatively straight fwd. https://scotch.io/tutorials/using-sass-in-create-react-app-v2
Assuming a blank project in vanilla javascript this is what I do after running npm init and all that.
create and index.html file
create a css folder and scss/sass folder
inside the css folder create a style.css file
install node-sass as dev dependency
inside package.json file write a script like:
"scripts": {"compile:sass": "node-sass sass/main.scss css/style.css -w"}
run the script inside your terminal using npm run compile:sass
install live server if you have not already done so, npm i live-server -g
you can import all your scss files ie. _header.scss _nav.scss, _variables.scss into one main.scss file create above.
You might also need to have a non-empty style.css file before you compiling. This will be overridden once your run npm run compile:sass
Related
I am setup the project of the vuejs on of the my goals in the end of the project is to compile files scss which is the main file with name style.scss- from input to output in the file main file style.css to Load in the vuejs.
Also all files .scss should include with #importfor examples: #import "variables";and so on
in the main file style.scss.
I read about it.enter link description here
My project is as in the picture below.
Any idea how to sole it?
Thanks.
My dear friend, if I have understood your meaning correctly, I would like to try to offer you some solutions.
In order to use SCSS in a project and compile it automatically in the background, we can do the following steps:
1. Install node-sass
To get the compiler, we’re going to install the node-sass package.
Go to your terminal, navigate to the project folder and type in the following:
npm i node-sass
2. Create an SCSS folder
Create a new folder called scss in your project. After doing so, copy and paste all the CSS files from your css (or stylesheets) folder to your new scss folder.
Rename the extensions on all the newly pasted css files with .scss
You should end up with a scss folder which looks exactly like your css folder but with the files ending with .scss.
3. Add a script in package.json
In your package.json file, locate scripts and add the following piece of code inside it:
"scss": "node-sass --watch scss -o css"
If your css folder is named something other than css, then replace the word css with the folder name.
Similarly, if your scss folder is named something other scss, then replace scss with the correct folder name.
Setting context in the overall package.json file, the script will be placed like this:
{
“name”: “example-project”,
“version”: “0.4.2”,
“scripts”: {
“start”: “node ./bin/www”,
“scss”: “node-sass — watch scss -o css”
},
"dependencies": {
"express": "~4.16.0",
"express-favicon": "^2.0.1",
}
}
4. Run the compiler
Get back into terminal and run the following commandL
npm run scss
Now you’ll notice any changes you make in your scss files will automatically be reflected in the css files.
if you have any new idea about Compile SASS to CSS you can check another steps with this link.
I'm new to SASS and needing to compile it into CSS code. I'm using node.js NPM to compile it, I've installed everything and I have my package.json file in the folder for my website. I also have all my CSS and SCSS/SASS files in my website folder, there's no extra folders. I'm following a tutorial and this is the script it uses:
"scss": "node-sass --watch assets/scss -o assets/css"
Obviously that does not work because the directories assets/scss and assets/css are wrong. I know I can fix the error by replacing them with the directories of my main.scss file and my main.css file in my website folder. I just don't know what I should write if it's all located in the same folder.
Can anyone tell me how the directories should be written or show me how I should write this script for compiling?
Your package.json is must in the root directory, so follow it and reach to the destination of your SCSS and CSS folder, I used below node-sass script
"node-sass": "node-sass -w --source-map true assets/scss/main.scss assets/css/style.css --output-style expanded"
If it's all located in the same folder
for that, you need to use
"node-sass": "node-sass -w --source-map true main.scss style.css --output-style expanded"
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
I am new to jhipster. I added another css property in main.css file and called it in the home.html. But after running gulp install command that modification was disappeared from the main.css. So how to save that modification even after run that command?
When using the SASS option in JHipster, you should make all of your CSS or SCSS changes in main.scss.
During the build process, gulp (AngularJS) or webpack (Angular) will compile main.scss into main.css, replacing the contents of that file. This is also why main.css is included in .gitignore.
How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass
file:
sass --watch style.scss:style.css
But how to watch changes in whole directory/folder containing many sass files.
Simply use the command sass --watch <input folder>:<output folder>, like this:
$ ls -l
css/ sass/
$ sass --watch sass:css
Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.
Expanding the answer by piouPiouM a little:
Output files will be created with the same names as input files except ending with .css.
<input folder> and <output folder> can be the same.
Both folders can be the present working directory, so the following is valid:
$ sass --watch .:.
Go to you terminal and get to you folder then wrote:
sass --watch .
this will watch all sass files and convert to css files with the same name.
also you can do it in this way:
sass --watch ~/user/youUser/workspace/project/styles/
I hope this can help you.
I ended up doing this without using Grunt or Sass-watch:
npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css
if you are in your current folder then do the following to watch it.
F:\sass tutorial>sass --watch ./:./
Just in case someone faces with this issue in 2018:
sass Website refers to Ruby Sass that is been deprecated.
and as now (May 2018) if you install dart sass via npm , it does not support --watch command
What to do:
you need to install node-sass globaly , like:
npm install node-sass -g
and then restart the command line , then use this code:
node-sass --watch scss/styles.scss css/styles.css
to compile your scass files to css.
basically node-sass supports --watch command and we use that to compile our scss codes to regular css files.
and just in case you get an error like this at the first time that you save your .scss file:
{
"status": 3,
"message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
"formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}
what you need to do is save it again, it will work correctly!
According to the information, you can use the next command line:
sass --watch .
Source: http://sassbreak.com/watch-your-sass/#what-does---watch-do
You can create one sass file which includes the rest of the files, and then just watch this file.
Alternately, look into Grunt and the very good grunt-contrib-compass plugin
You can set sass to watch all the .scss files(for my case i got several .scss files in src/static folder) to compile, but before install it globally:
npm i -g sass
then go to the project folder and type command below:
sass --watch $(pwd)/src/static
also you can wrap it in npm script in package.json, like
"scripts": {
"sass:watch": "sass --watch $(pwd)/src/static"
}
and run it by this command:
npm run sass:watch