Not using donejs for this. Have functioning canjs v3 (beginning) app.
Tried “import ‘./styles.css’” and got no love. It wanted to define styles.css.js.
Since I’ve worked with donejs (in v2 world), I thought to see what happened with .less. No love.
Googled “canjs steal less css” and found both steal-css and steal-less. The npm listing for steal-less says it’s already in steal. Since it doesn’t work, I added steal-less anyway. It worked with
import ‘./styles.less!steal-less’
on my development system.
I ran build (steal-tools) to prepare deployment and get error:
Error loading “bookmarks-plus-ui@1.0.0#styles.less!steal-less@1.0.1#less” from “bookmarks-plus-ui@1.0.0#app” at file:/Volumes/qubuntuFileServer/personal/genericWhite/genericWhite/code/service/bookmarks-plus/user-interface/html/bm/app.js
Error loading “steal-less@1.0.1#less” at file:/Volumes/qubuntuFileServer/personal/genericWhite/genericWhite/code/service/bookmarks-plus/user-interface/html/bm/node_modules/steal-less/less.js
window is not defined
The css in styles.less is minimal and works correctly on dev. When I remove it (but leave steal-less in package.json) the error goes away. Of course, so does the styling.
I’m clearly missing something. Please advise.
What version of steal are you using? If you’re using 1.0 you need to add steal-less as a plugin. Take a look at http://stealjs.com/docs/steal-less.html.
Also, you do not need the !steal-less, this is handled automatically based on the .less file extension.
I’m using 1.0.7, which appears to be the latest version.
The !steal-less is, I agree, not useful. Unfortunately, removing it doesn’t make it so that steal-tools works for build.
Thanks for the help.
Did you add the plugin config?
1 Like
That worked. I reiterate for future reference.
Dear Future Programmer,
Contrary to the statement on its NPM reference page, steal-less is not built into steal. Further, it does not get included in a project in the same was as other plugins, i.e., “–save-dev” not “–save” and no "import steal-less from ‘blah/path/’.
Instead, you need to first install as a dev dependency:
npm steal-less --save-dev
Then you need to edit your package.json manually to add this:
"steal":{
"plugins": ["steal-less"]
},
(It’s worth noting that the migration page mentioned above calls for this to be a “system” property. Later in the doc though, it says that “system” is deprecated in favor of “steal”. “steal” works. .less is available and the steal-tools build process likes it.)
After these, the connection to less is conducted behind the scenes. No specific ‘import’ or other reference is needed. The system detects the file extension and does good things automatically. I am able to get full .less goodness with this call…
import './styles.less';
…to style my application.
In case it’s helpful, this is how my package.json looks right now…
1 Like
Thanks! I’ll update the steal-less readme to give the proper instructions.
1 Like
