I have a project that is structured as such
project/themes/name/sass
And I want to output that Sass to a css folder
project/themes/name/css
How can I achieve that?
You can try the following setup:
Arguments: $FileName$:$ProjectFileDir$/themes/name/css/$FileNameWithoutExtension$.css
Output paths to refresh: $ProjectFileDir$/themes/name/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/themes/name/css/$FileNameWithoutExtension$.css.map
Working directory: $FileDir$
Related
I can't get WebStorm's SCSS file watcher to compile the Bootstrap SCSS files.
I have downloaded sass-dart for Windows and have tried pointing WebStorm's file watcher to dart-sass\sass.bat and dart-sass\src\dart.exe
The file watcher is enabled, it's not the common issue I've seen in other questions here where the file watcher keeps disabling itself.
Here is the file watcher setup I am using in WebStorm:
When I use dart-sass\src\dart.exe the result is:
Could not load "bootstrap-grid.scss:bootstrap-grid.css": Unknown scheme (bootstrap-grid.scss) for bootstrap-grid.scss:bootstrap-grid.css
null
and when I use dart-sass\sass.bat the result is:
Error reading bootstrap-grid.scss:bootstrap-grid.css: Cannot open file.
Obviously I'd prefer it to run with no errors and spit out correctly compiled CSS files!
Works fine for me using similar watcher setup. What Working directory: did you specify for your file watcher? Please make sure that it's set to $FileDir$:
i have problem with compile less file.
In grunt config file themes.js i added
<theme>: {
area: 'frontend',
name: '<Vendor>/<theme>',
locale: 'de_DE',
files: [
'css/styles-m',
'css/styles-l'
],
dsl: 'less'
}
and when i use commend
grunt less:<theme>
i get
Destination pub/static/frontend/<Vendor>/<theme>/de_DE/css/styles-m.css not written because no source files were found.
I have _theme.less in folder web/css/source.
When i try make deploy it doesnt make file _theme.less in pub/static.
Where you have / did you actually insert the names of the vendor and theme? The error message includes / so I think what you posted above is literally what you put in the themes.js file.
And that is why it can't find those files.
If any error when using the grunt less command then first Execute the command.
grunt exec : pub/static/frontend
Then use command
grunt less : <theme>
My scss has the following structure:
Nested directory view:
style
sass
components
_somecomponent.scss
_someothercomponent.scss
style.scss
style.css
Collapsed directory view:
style/style.css
style/sass/style.scss
style/sass/components/_somecomponent.scss
style/sass/components/_someothercomponent.scss
style.scss includes _somecomponent.scss and _someothercomponent.scss, and is supposed to generate style.css. It does all of this correctly, but the output file is not in the correct directory. Currently it outputs to style/sass/style.css.
Webstorm is configured with the following parameters:
Program: /usr/bin/sass
Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output path: $FileParentDir$\$FileNameWithoutExtension$.css
The phpstorm tag has been added because it shares the same file watcher with webstorm. I am using Mac OS X, with the latest Webstorm 9.x.
How do I fix the output path?
Please change the Arguments field accordingly:
Program: /usr/bin/sass
Arguments: --no-cache --update $FileName$:$FileParentDir$/$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output path: $FileParentDir$/$FileNameWithoutExtension$.css
The 'Output paths to refresh' option doesn't tell the compiler where to put the generated files - you have to set the program arguments accordingly; 'Output paths' is used by IDE to synchronize its file system with external changes - you need to make sure that the pattern specified there matches the actual compiler output so that the IDE knows where to look for generated files.
So you need to modify BOTH 'Arguments' and 'Output path to refresh' options to have the generated files created in non-default location.
I have a SCSS build working from Grunt that takes files in a "build" directory and outputs them to a "deploy" directory.
Is it possible to split off a single file -- the primary CSS file -- and have it output not only to the deploy directory but also on to a production server? That's the only file that will be changed now that the site is live.
I know Capistrano can do something like this, but it's probably not worth it on our end to add more technology to the workflow. So is it possible within Grunt?
Rather than modify the configuration of your css generation task which could result in a second copy being compiled, you can utilize an additional entry under grunt-copy:
styles: {
expand: true,
dot: true,
cwd: 'deploy/styles',
dest: 'other/styles',
src: 'filename.css'
}
Take care that you aren't calling the entire copy task elsewhere in your Gruntfile, and when you call this instance you'll use 'copy:styles'.
Is there a way to configure SASS FileWatcher so it builds a Minified CSS?
I currently configured SASS + YUI Compressor to accomplish this but I would like to do this with pure SASS if possible.
Here are the screenshots of both configurations:
SASS
YUI Compressor CSS
Thanks in advance.
Probably the fastest way to achieve this is to use the compressed option, mentioned in the previous comments, as an argument. The quickest way to configure this in PHPStorm is as follows:
Go to File > Settings
Inside Project Settings select File Watchers
You should already have an SCSS watcher created here (if you have the SCSS watch plugin enabled, PHPStorm prompts you to create a watcher when opening a new .scss file.) Otherwise, enable it (more info about that in this section of the official documentation,) and then create the new watcher pressing the "+" symbol.
Double click the watcher name to access its configuration.
In the Arguments line make sure to add the --style compressed argument
Click OK and you're done
This image shows how that configuration should look:
From that point on, your .css output files will be compressed.
The correct answer is --style=compressed
menu File -> Settings -> Tools - File watchers
add scss and in argument add --style=compressed
If you are using sassc under Linux (Arch) you could use as Arguments:
-t compressed -m auto $FileNameWithoutExtension$.scss $FileNameWithoutExtension$.min.css
For me, --style compressed, --style compressed and --style=compressed don't work.
I had to add the option -x as an argument.
Like here:
If you want more details this post the following post is where I found this solution: https://stackoverflow.com/a/25579991/9861577.