I currently compile LESS with lessc (version 1.7.0) fine, but when I add --source-map, I get
SyntaxError: Cannot find module 'source-map' in /home/me/my.css
I suspect this may be because I did not install LESS using npm. How can I get source maps working?
The requirement (sorry): This must be able to be versioned entirely in a VCS, and not use npm for setup.
If you're not downloading the whole package at least make sure you have the libraries LESS needs. Checking their repo you can see source-maps is listed there so you might need those files too.
Here's the link: https://github.com/less/less.js/tree/9d3ef59cf818691cd52410879e7152e7d589de32/lib
Hope it helps.
Related
i am learning tailwind css and in tutorial they write a command like this npx tailwindcss-cli build css/tailwind.css -o build/tailwind.css
and it build a different folder name "tailwind.css" in same directory
but in my case it gives a error
No valid exports main found for 'C:\Users\HHH\AppData\Roaming\npm-cache\_npx\4952\node_modules\tailwindcss-cli\node_modules\postcss'
I don't have any idea what it means and whats wrong with the setup.
please help.
I find the solution.
Just install the current node.js and reinstall the specific version.
download here
After that install it and everything works fine.
Note: It works in when you follow the tailwindcss cli method.
follow first part of video
Our team is starting to use LESS to write CSS. I am using atom.io and there is a plugin to auto-compile LESS to CSS on save. (Link to plugin) However, some team member prefer to use sublime. While there are also similar plugin for sublime, it requires npm for installation. Our team mainly use PHP with composer for package management, so installing npm just for a plugin seems a bit overkill. Is there any other way to do LESS auto-compile on save with sublime?
Not that I know... :(
There is a python library that compiles less to css. (sublime plugin are written in python) though
So, all you've got to do is: write this plugin using lesspy
If you are a bit patient, I am trying to make this plugin, it shouldn't be to hard, I'll keep you in touch.
Matt
EDIT: Here's the plugin: st-py-less. Follow the (simple) instructions to install it. Only working with Sublime Text 3.
They could probably use SublimeOnSaveBuild
But npm and Composer aren't really comparable here. Composer manages a project's dependencies, npm provides easy access to hundreds of thousands of community-maintained packages. Using Composer isn't a reason to not install npm.
And the package you install when you "install npm" is under 14MB. It also comes included with Node.js. The "Installation Requirements" for sublime-less2css, by listing "install node" and "install npm" as two separate steps are misleading, and the provided links aren't that helpful. Here's the official documentation for Installing Node.js and updating npm
This is getting beyond the scope of your question, but to have a single team-wide editor-agnostic setup for automatically compiling LESS to CSS you could use Gulp. If you aren't familiar with Gulp, follow CSS-Tricks' Gulp for Beginners from the start up through the "Watching Sass files for changes" step. (Note that the guide teaches you how to use gulp-sass to compile Sass to CSS; in your case you'd just use gulp-less instead.)
I'm hardly trying to get my existing ng2-prototype running in a meteor1.3 setup. So far i was building the prototype with webpack, and there is a provide plugin to make things like jQuery or Tether available during module building:
plugins: [
new ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.Tether": "tether"
})
]
As you can see, i did the same with "tether", since it's still the lib needed by bootstrap 4 alpha.
Now i'm wondering how i could achieve the same in my meteor1.3 project..? As written in the changelogs of the package "angular2-meteor", it is using webpack under the hood now to build everything.
angular2-meteor changelog
So, it should be possible to use the same provide plugin again in meteor1.3, right? But... how?
From the github issue threads of "angular2-meteor":
there are multiple ways: you could install https://atmospherejs.com/coursierprive/tether, or,
since Meteor 1.3 prefers NPM now, you could install Tether NPM and require it before you use bootstrap 4, or, if you want more control and modularity, you could create own local package (in the packages folder) with all dependencies (added from NPMs) you need including Tether (similar to the way angular2-runtime done in this repo).
i will try this out and i'm already sure this will do the trick :) many thx #barbatus ;)
Update:
Ok i'm going with the npm package solution, i had tether installed already. If you don't have it, do this first:
npm install --save tether
Now, the single require statement won't be enough.. bootstrap 4 which i'm trying to include completely is asking for a window.Tether function. So i ended up doing this:
let Tether = require('tether');
window.Tether = Tether;
// import all bootstrap javascript plugins
require('bootstrap');
Cool is, there is also a typings definition file for it now, just add it by running:
typings install --save --ambient tether
After adding it to the window global context, the errors are gone... but ok, the solution trough the webpack provide plugin feels still cleaner -> it will provide the Tether object for each module separately during build, so it won't end up living in the window global context after all. But i'm just lucky to have it running now :)
PS: jQuery is provided anyways by meteor, that's the reason it is already enough to get it running by just including tether alone.
Update: yeah jQuery is included by default - but it is just a package in your /.meteor/packages file ;)
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.
There isn't a clear guide on how to install Phantom for Meteor, so I decided to ask a question to clarify things.
Do you have to install phantom binary in /usr/local/bin/? I downloaded a compiled phantomjs from the official website and placed inside the above path. I can run phantomjs from anywhere now because it's added to path.
In addition to 1, do you also have to install it from meteor npm? I followed this to install "phantomjs": "1.9.13" as a npm package inside my Meteor app. It gets confusing from here because the binary from the official website is v2.0.0 while the npm package is 1.9.13. Do I need to install both?
Because of the confusion in 2, I removed /usr/local/bin/phantomjs but then I can't run $phantomjs anywhere because I don't have anything in PATH.
My ultimate goal is to get spiderable working. What should I do?
Okay, the problem was the compiled phantomjs binary from the official webpage cannot be used right away in the latest Mac OS, but you have to unpack it first. To run spiderable package you don't need to do anything other than placing the binary file phantomjs inside your local path /usr/bin/local/. You can test this by running $phantomjs in your terminal. If you see phantomjs not found then you haven't installed it. If you see an error killed 9 then you have the same problem as mine, and you can solve it by following this.
You do not need the meteorhacks:npm package.
You can do this in two ways:
Method 1:
If you'd like to be able to use PhantomJS via your Meteor app, you would need to use the Meteorhacks NPM package and use the latest NPM version 1.9.16 I believe.
After that, you can edit your packages.json file to add "phantomjs": "1.9.16", and then reference it via var phantomjs = Meteor.npmRequire('phantomjs');
Method 2:
Alternatively, you can use the smart package for Meteor PhantomJS and give that a shot.
I personally feel like Method 1 is a better option, as that worked for me. I needed PhantomJS for an app, and that solution worked for me. I haven't tried Method 2 so I can't speak for it, but it looks promising as well.
Give them a shot, and let me know how it goes. Hope that helps!
Here is a phantomjs wrapper package from atmosphere: https://atmospherejs.com/gadicohen/phantomjs
More importantly here is the spiderable package:
https://atmospherejs.com/meteor/spiderable
I couldn't really answer the questions but more so point ya in a direction that I hope will solve your problem :)
In the terminal:
$ meteor npm install --save phantomjs
In your_meteor_app/server/main.js file (or wherever, provided it's server-side)
import phantom from 'phantom'
Just use npm:
//Global effect on your machine
npm install -g phantomjs
//Test if installed
npm list -g
//Test spiderable working correctly
Test spiderable