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
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 am trying to set the save location of my css file to its own css folder in the Live Sass Compile Config (Live Sass Compile > Settings:Formats)
I have tried setting the savePath to "/css" - After this - I tried saving my main.scss file, which is supposed to generate a css folder with a main.css file in it. However, it is just generating a main.css file in the same folder as my main.scss (which is in a scss folder).
I have tried uninstalling and reinstalling VSC but my previous settings were saved.
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
"window.zoomLevel": 0,
"editor.tabSize": 2,
"editor.wordWrap": "off"
}
The code above is all that shows in my .json file. The top 3 lines are greyed/blacked out (format to save path).
This display in my .json file is way different than what I'm finding in tutorials on this.
I strongly suggest you to avoid using that for sass.
Use node-sass instead. It's super easy to setup and run!
Just install it from command line:
npm i node-sass -g
And run it in the background:
node-sass [entry path-to-file] [output-path-to-file] -w
The -w watches for changes in your .sass or .scss file and compiles straight away!
In your settings.json rename the path form "\css" to "\\css"
Like this:
{
"format": "expanded",
"extensionName": ".css",
"savePath": "\\css"
}
Don't worry it's how VS Code understands file paths. Not your fault:)
Refresh the main css file for every change in your child scss files (ctrl+s)
Make sure you renamed your sass main file style.scss.
If your sass main file have underscore before name like _style.scss, your live sass compiler will not generate .css file.
So rename your main sass file from _style.scss to style.scss.
I have the following file structure:
--public_html/
- css/
- less/
- _mixins.less
- _variables.less
- _theme.less
- main.less
I am using PhpStorm with a File Watcher running LESSC from NPM.
My file watcher is as follows:
Program: /usr/local/bin/lessc
Arguments: --no-color $FileName$
Output paths to refresh: ../$FileNameWithoutExtention$.css
Files:
main.less:
#import "_variables.less";
#import "_mixins.less";
#import "_theme.less";
_theme.less contains my stylsheet and _variables.less and _mixins.less are all pretty self explanatory.
When I modify and save main.less The file main.css is created in the css folder as it should.
However, when I edit my _theme.less file, LESSC creates a _theme.css file, also.
How do I stop these extra files being created?
If you need any more info, please ask.
Please ensure that Track only root files option is enabled in that particular File Watcher settings -- it does just that.
From https://www.jetbrains.com/help/phpstorm/2016.3/new-watcher-dialog.html#d199014e291
When the File Watcher is invoked on a file, PhpStorm detects all the files in which this file is included. For each of these files, in its turn, PhpStorm again detects the files into which it is included. This operation is repeated recursively until PhpStorm reaches the files that are not included anywhere within the specified scope. These files are referred to as root files (do not confuse with content roots).
When this check box is selected, the File Watcher runs only against the root files.
When the check box is cleared, the File Watcher runs against the file from which it is invoked and against all the files in which this file is included recursively within the specified scope.
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:. ?
I've a quick question about setting up a watcher in WebStorm for SCSS transpiling.
I want the watcher to transpile scss files to a specific folder:
Project/assests/scss/(several scss files)
transpile to
Project/src/css/(transpiled css files)
I noticed that there are terms like $FileNameWithoutExtension$ or $FileParentDir$, what language is that? :)
Thanks a lot!
Please try the following:
Arguments: --no-cache --update $FileName$:$ProjectFileDir$/src/css/$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to Refresh: $ProjectFileDir$/src/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/src/css/$FileNameWithoutExtension$.css.map