I can use sass --watch to watch a /sass folder then output a .css file to a /css folder.
e.g. sass --watch sass:css
this creates main.css in a /css folder.
However I would like to create a file called style.css in the current directory. If I try sass --watch sass:style.css I get main.css created in a /style.css folder.
How do I generate an output file called style.css in the current directory from a /sass folder?
Have you tried: sass --watch sass:. ?
Related
I'm trying to define in the package.json file, one script that will compile multiple scss files into files with the same name in the same folder, possible?
I write in TS/JS.
The current situation:
/src
/style/
a.scss
b.scss
I tried this script in package.json:
"scripts": {"build-sass": "sass src/style/*.scss ./src/style/*.css"}
The desired result:
/src
/style/
a.scss
a.css
a.map
b.scss
b.css
b.map
Many thanks in advance to all the helpers :)
I found the solution on the Sass website.
For all the files in all subfolders and saved in the same folder with the same names, I wrote this
"scripts": {"dev-sass": "sass --watch ./:./"}
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 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
I have a styles folder in my project. Inside it I have the following folders: css, scss, css-maps. I want the following: when I update a scss file in scss folder, I want it to create/update a css file with the same name in css folder and *.css.map file in css-maps folder.
|styles
|css
my-style.css
|css-maps
my-style.css.map
|scss
my-style.scss
I defined a SCSS watcher in my Intellij. It has the following settings:
Arguments: --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css --no-cache --update $FileName$:../css-maps/$FileNameWithoutExtension$.css.map
Working directory: $FileDir$
Output paths to refresh: ../css/$FileNameWithoutExtension$.css:../css-maps/$FileNameWithoutExtension$.css.map
The problem is that it still outputs my-style.css.map to my css folder (and CSS file points to this map file), while in my css-maps folder it puts 2 files: my-style.css.map which looks exactly like the .css output file, and my-style.css.map.map. Yes, with double .map extension.
How can this be fixed?
Here is configuration I'm using, hope it will help:
Arguments: --sourcemap=none --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css
Something like this:
sass --watch style.css:(other than root directory)
//or
sass --watch (other directory than .scss file):style.scss
From the output of sass --help:
--watch Watch files or directories for changes.
The location of the generated CSS can be set using a colon:
sass --watch input.sass:output.css
sass --watch input-dir:output-dir
You can, there isn't any restriction. Just use the directory from where you call sass as the base path or an absolute path. For example:
sass --watch relative/path/to/a/scss/file:/absolute/path/to/a/css/file