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>
Related
I have annoying issue with sass plugin. I use yeoman webapp geneator with default configuration. When I want to build production files (gulp command) I get sass error "File to import not found or unreadable [...]". It works only at first running gulp command – dist folder build properly. But when I want to run gulp command again I keep receiving this error (I have to restart computer to make it works again – at first run :) ). On the other hand, running "gulp serve" (live preview) command gets this same error only at fresh start – when I modify some .scss, files compile properly.
This is the main SCSS file:
// bower:scss
#import "bower_components/slick-carousel/slick/slick.scss";
// endbower
#import '_reset', '_fontello', '_variables', '_helpers', '_basic',
'_widerScreens', '_carousel';
Yeoman webapp generator v.3.0.1
I found this solution. Try to reproduce.
https://garystanton.co.uk/gulp-sass-file-to-import-not-found-or-unreadable/
A lot of sources explain that for this you need to
create a "File Watcher"-Job in the WebStorm-Settings (Tools)
define a "Scope" in WebStorm for the files you want to process
define a .babelrc file for configuration. Babel will use this automatically so you save some params in the call
{
"presets": ["es2015", "react"],
"plugins": ["transform-es2015-arrow-functions"]
}
npm install --save-dev the corresponding packages together with the babel-cli package.
BUT... how can I run the babel-Command on Windows when babel-cli module just delivers a "babel.js" file in its bin-folder? However Windows can only execute .exe, .bat or .cmd-files.
I tried to wrap the call in a cmd-script containing babel %* as I found a solution in one web article, but this did not work for me.
The solution for me was to fill the File Watcher form in a way to have the call of the node executable as Program and add the call for babel.js as first of the Arguments
Program: C:\Program Files\nodejs\node.exe
Arguments: $ProjectFileDir$/node_modules/babel-cli/bin/babel.js $FilePathRelativeToProjectRoot$ --source-maps --out-dir src/test/js
Working Directory: $ProjectFileDir$
Output paths to refresh: $ProjectFileDir$\src\test\js
This makes the babel.js callable for the File Watcher.
All is in the title :)
How can I build css from sass file in vscode ?
In task file I just found lines for LESS not for SASS...
Thanks a lot !
I got it to work.
My root path has a /css folder underneath with my styles.scss file & the associated map file. I also had to fix my path for ruby. Once those two were working, my build showed an error where ruby couldn't find the scss file. So I fixed my task file - here is the working file. Notice the ${fileDirname} - that fixed the build errors for pathing.
{
"version": "0.1.0",
"command": "sass",
"args": ["${fileDirname}/styles.scss", "${fileDirname}/styles.css", "--trace"],
"isShellCommand": true
}
}
But this was just a test -- it doesn't watch and build more than 1 file as you would normally want to in a larger system. The docs for gulp/automation are here: https://code.visualstudio.com/Docs/languages/CSS
We don't have predefined problem matchers for SASS yet. You might want to open a feature request here https://code.visualstudio.com/Issues/List
But you can always create a problem matcher for SASS yourself. Have a look at the doc here: https://code.visualstudio.com/Docs/tasks#_defining-a-problem-matcher
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'm trying to get assetics running with the yui compressor and, if this is running, sass. Right now, both don't work. When removing all filters from config.yml and the twig template, it works and php app/console assetic:dump does copy the css and js files.
Now I want to add the yui compressor and my config.yml looks like this:
assetic:
debug: %kernel.debug%
use_controller: false
filters:
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar
Adding the filter to the template and running assetic:dump again ends in the following error (translation of message by me):
[RuntimeException]
The syntax for filename, directory name or drive name is wrong
I found an article telling me to specify the path to java.exe, so I add this to config.yml:
assetic:
..
java: C:/Program Files (x86)/Java/jre6/bin/java.exe
..
Now assetic:dump tells me:
[RuntimeException]
The COMMAND "C:/Program" is either written wrong or
I tried playing around with both variables (using \ or \ instead of /, adding single or double quotes, working with short alias Progra~1 or Progra~2) in the config, but I didn't get anywhere. The both errors comming up all the time. Maybe someone can point me in the right direction.
Ok, I figured it out. Man, this one was brutal.
Let's start with the easy stuff. A working version of the config.yml can look like this:
assetic:
debug: false
use_controller: false
java: C:\Program Files (x86)\Java\jre6\bin\java.exe
sass: C:\Program Files (x86)\Ruby192\bin\sass.bat
filters:
scss: ~
yui_js:
jar: %kernel.root_dir%\Resources\java\yuicompressor-2.4.6.jar
For some reason, assetic is always importing a whole directory for scss, so I had to make a combine.scss which imports the other scss files in the correct order.
And now it gets ugly, as one have to change the assetics core in order to get this working. The developers of assetic know this bug and I think it is fixed in some development trunk/branch but not the stable one.
The Assetic\Util\ProcessBuilder has to be changed on line 95
if (defined('PHP_WINDOWS_VERSION_MAJOR')) {
,line 103
$script .= ' '.implode(' ', array_map('escapeshellarg', $args));
and line 110
return new Process($script, $this->cwd, null, $this->stdin, $this->timeout, $options);
I hope this bug get fixed soon and till then anybody trying to get it working finds this thread... Took me like 8 hours of debuging, reading and trying different approaches.
Answer by Boo Nov 19 at 22:53 did work for me by changing everything he mentioned in Assetic\Util\ProcessBuilder (I ignored line 95 as it looks the same as in my file)
Now it works on windows. Thanks!
Just to confirm. Im using Symfony 2.0.7 and yuicompressor-2.4.7
For other users who use window server 2008 r2 :
Maybe you should change the C:\windows\Temp folder property to 777 (read/write) for the IIS user / or the machine's normal user
please unpack the ruby.7z from rubyinstaller.org , and go to C:\_ruby193\bin , in this unpack position you should exec the CMD prompt , type :
ruby -S gem install sass
so that you will get the sass.bat in that position
It's time to use Boo's best answer , and please notice that in symfony2 dev env maybe it's not necessary to change the use_controller to false (in the config.yml) , because there's another use_controller in the config_dev.yml (set to true) , and in routing_dev.yml there's also a _assetic router , they're perhaps associated.