I have installed WebStorm 9 on Mac. I am having problems getting my LESS code compiled to CSS even after installing the LESS Compiler plugin.
The following message gets displayed:
"Missing CSS Output Directory - You can add CSS output directories under Settings > Project Settings > LESS Compiler"
Though there is no "Project Settings", I have add out put directory to LESS Compiler in "Settings".
It still does not work.
Known issue - see https://github.com/acdvorak/intellij-lessc-plugin/issues/47.
I can suggest using less compiler (npm install -g less) configured as a file watcher instread - see https://www.jetbrains.com/webstorm/help/transpiling-sass-less-and-scss-to-css.html
I also meet the problem in mac WebStorm, finally found where is wrong:
WebStorm Less compiler only work for ver. less 1.6.2
please use below under your project:
sudo npm install less#1.6.2
then in File Watchers in WebStorm to edit Less watcher,
in Program field change path to:
yourProjectPath/node_modules/less/bin/lessc
then happy css will appear. :)
Related
I've installed Bootstrap 4 Instant Theme on my dev machine, which has DNN installed. I can get the theme up OK.
I've installed Node.js and that looks OK.
I've run npm ci in the app/theme folder, and that seems to have run OK. There is a webpack.config.js file in the folder.
I don't get the "run webpack" instruction!
When I make changes to the _variables.scss file and save and then refresh my page, I don't get the theme updates.
The Client Resource Management was already disabled.
I've cleared the cache and restarted the application.
What am I missing, or what is missing from the documentation that it assumes I know?
Just to be sure: did you compile the scss? As Bootstrap 4 uses SASS, the scss need to be compiled in order to take effect.
Try
npx webpack --config webpack.config.js
cmd is enough to run the command. I use a .bat with this to quick compile.
run npm run webpack from commandline.
I have extended the instructions and explained the step better. I hope you were able to move on by now.
João Gomes, thx for your quick answer =)
It seems that a recent version of node-sass (3.4.1) breaks our build. I am consistently getting this error message:
It's not clear which file to import for '#import "../file"'.
Candidates:
../file.scss
../file.css
Please delete or rename all but one of these files.
Now, this is occuring for all the files in the project that have not explicitly specified "file.scss" in their name.
I have not been able to determine a fix for this bug - Nor can I find any documentation to address what has changed in node-sass to cause it. We have too many files for it to be practical to go rename each import.
Can someone point me in the right direction?
Edit:
This is also happening with files which have an underscore (eg. _file) in their path. Doesn't seem to recognize that these files are partials.
I had the same problem, but only with node-sass version 3.4.2. Version 3.4.1 was working ok for me.
It seems this is a known issue in node-sass - https://github.com/sass/node-sass/issues/1222 however its not clear exactly which versions are affected.
I fixed it by uninstalling grunt-sass, then installing the exact version of node-sass that worked correctly (v3.4.1), and then finally reinstalling grunt-sass.
$ npm uninstall grunt-sass
$ npm install node-sass#3.4.1 --save-dev
$ npm install grunt-sass
This means grunt-sass uses your installed version, rather than installing its own version which it defines as "node-sass": "^3.4.0"
Weirdly even though I specified an exact version in the install command I still ended up with this in my package.json:
"node-sass": "^3.4.1"
So I manually changed that to the exact version so other developers in the team would get the correct version:
"node-sass": "3.4.1"
Of course if you find that the only version that works for you is v3.3.0 then use that that version in the instructions above.
Option 1
You can import using the file extension
#import "../file.scss"
Option 2
Or you can tell SASS not to generate the .css file by import without output. You have to rename the file from file.scss to _file.scss
That will let you import like this
#import "../file"
I prefer option 2 as it reduces the number of css files you have to keep track of.
These are my settings. Here is the error i am facing while compiling .less file.
Step 1: Install npm less module
npm install -g less
Step 2: Install the less plugins in Intellij Idea
File > Settings > Plugins
Step 3: Setup Less Profile
File > Settings > LESS Profiles
It'll auto-generate the CSS file as soon as any change is noticed in LESS if "Compile Automatically on Save" is used.
You are incorrectly looking in Project Strucutre.
The Project Settings is the icon to the left (spanner).
I have a LESS file which I want to compile to use as my bootstrap theme. How can I compile it? Is there a place where I can do this?
The less FILE comes from http://bootswatchr.com/ but when I click the link get CSS and choose either minified version or complete version, nothing happens.
I have the LES file from the left pane, is there a way I can still compile it?
Install node.js
Install the Less compiler: npm install -g less
Run the Less compiler on your Less source to produce CSS: lessc your-source.less > output.css More info: http://lesscss.org/#using-less
If you are using WebStrom IDE, then it has a plugin for LESS to compile. I have been using the plugin to compile the LESS over a year.
If you want software, then I would recommend SimpLESS. You can use it on OSX/Win. It has drag and drop support which is nice and will tell you if your syntax is wrong. It also updates to support the latest LESS version.
I'm pretty new to whole Grunt and SCSS workflow stuff and recently configured Grunt with a WP theme development that run under MAMP. Installation of Node, NPM, Grunt and its dependencies went smooth. However, when i make a change on .SCSS files, it doesn't seem to be reflecting the changes to the .CSS files due to following warning from compass:
Running "compass:app" (compass) task
LoadError on line ["55"] of /Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_require.rb: cannot load such file -- susy
Run with --trace to see the full backtrace
Warning: ↑ Use --force to continue.
Aborted due to warnings.
Not exactly sure what's up but obviously a communication issue between Ruby and Compass?
Whether it be incorrect version mapping or paths..?
I researched and attempted following:
Uninstalled the current and installed new Ruby
Installed RVM (didn't use it, just installed it)
Upgraded compass to the latest version 0.12.2 and made sure this version is reflected in package.json for grunt.
Any pointers and advise highly appreciated!
I don't know if this is an option but you might look at PrePros (https://github.com/sbspk/Prepros). I tried for a while to setup the raw/core setup you are working with but it was just always quirky - not to mention super tedious to setup. PrePros takes all the pain away! Just a suggestion.
Related/Reference link: https://stackoverflow.com/questions/19866550/sass-haml-compile-on-prepros