I recently added a SCSS file-watcher in PhpStorm and generally it does what it is suppose to. The only issue I have is that it creates a new folder within the sass-folder everytime it synchronizes. The new folder doesn't have a name but it includes the files of the sass-folder.
These are the settings of the file watcher:
Scope:
The sass-folder
Arguments:
--style expanded --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css
Output paths to refresh:
../css/$FileNameWithoutExtension$.css:.../css/$FileNameWithoutExtension$.css.map
Is there something wrong with the settings?
There are 3 dots in the output path. Change it to:
../css/$FileNameWithoutExtension$.css:../css/$FileNameWithoutExtension$.css.map
Related
I am using below npx command to generate tailwind.config.js file, it is creating this file in root directory by default. I want to create it in custom /config folder. Could anyone please guide me.
Also wanted to know what all changes are needed for tailwind to work with config residing in custom folder.
npx tailwindcss init
Thanks in advance.
init command may accept one of these flags - -f to create full tailwind config and -p to create it with additional postcss.config.js. You may change directory and create config file there - not sure is it good for you or not
cd config && npx tailwindcss init
Every path within your config file is relative so pay attention at content section. Also your compiler as well must have correct path to config file, for example require('tailwindcss')('./config/tailwind.config.js') - but it depends in a way you compile styles
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
I am using Atom's linter, react, and linter-jshint/linter-jsxhint.
In my JSX files, I keep getting the warning
Warning: 'import' is only available in ES6 (use esnext option). (W119)
That's pretty straightforward. I did some searching, and found that this can be set under the jshintConfig option in package.json (when using NPM). My project uses NPM and I have a package.json. I added:
"jshintConfig": {
"esnext": true
}
After that, I did a reload but the warnings persist. I also modified my linter-jshint/linter-jsxhint config in Atom (config.cson) with:
"linter-jshint":
harmony: true
esnext: true
"linter-jsxhint":
harmony: true
esnext: true
And did a reload but that didn't help it either.
So: when using linter-jshint/linter-jsxhint as Atom packages, how to I set the esnext option?
You can create a .jshintrc in your project folder, it will be read by the linter as a json source file.
To use esnext option,
{
"esnext": true
}
You will probably need to reopen your JS file to be able to see the new changes.
First possibility, recommended : you can create a .jshintrc in you home directory and jshint will read it in case there is none in the project directory. You might need to restart Atom after.
Another possibility not recommended : you could also change the config of jshint in Atom and specify the location of your global .jshintrcif for some reason you don't want to put it in your home directory with the flag --config
'linter-jshint':
'jshintExecutablePath': /path/to/jshint --config /path/to/.jshinrc
Run 'which jshint' to find the path.
It is not recommended because every other .jshinrc file (in the project, etc.) will be ignore:
jshint will look for this configuration in a number of locations, stopping at the first positive match:
The location specified with the --config flag
A file named package.json located in the current directory or any parent of the current directory (the configuration should be declared as the jshintConfig attribute of that file's JSON value)
A file named .jshintrc located in the current directory or any parent of the current directory
A file named .jshintrc located in the current user's "home" directory (where defined)
You can use the inline configuration adding this comment in your file .js:
/* jshint esversion: 6 */
http://jshint.com/docs/
I've a PhpStorm file watcher running autoprefixer. However the file watcher runs recursively. I think this is because it generates a new css file which the file watcher then runs on.
Is there a way to force them to run only once?
I think I need a scope of Project files because I am not directly editing the css file, instead I have a SCSS file that creates a CSS file which should then be auto prefixed. My settings are shown below.
You have to:
create custom scope (Settings | Scopes .. or by clicking on corresponding "..." button in File Watcher);
[optionally] include desired files (e.g. *.css) -- not really required as "File Type" field of File Watcher already covers it
exclude already modified files (*.min.css)
Now use that scope in your File Watcher instead of default "Project Files"
Excluding directories from the Scope using a custom scope also works. This example is from a Symfony2 project.
Morning,
I have installed SASS and Ruby and have been using it with much pleasure and delight. When I am watching a simgle file, I can specify the output file name to include .min like this:
sass --watch css/scss/styles.css:css/styles.min.css --style=compressed
This works fine.
However, how would I do the same when watching a folder with the following command:
sass --watch css/scss:css --style=compressed
This works fine for me for all files in the folder. But, it outputs the files as
filename.css
I need to have the output file names to be
filename.min.css
I have read various posts on https://github.com/subash/Prepros/issues/38, which seem to suggest editing a file called config.rb
I found two such files on my system, none of which are located in Ruby. I made the suggested changes, but to no avail.
How can I do this easily?
I have Ruby193 installed.
If you can't rename your files in to [filename].mini.sass so the output will be [filename].mini.css you can include the original files in "proxy" files with names like [filename].mini.sass and compile them.
You can create the configuration file with compass:
compass config [path/to/config] [--sass-dir=sass --css-dir=css ...]
Here's a list of the configurations