I have a conditional statement which imports a file based on which type of menu has been set.
In this example, "nav-main-type" has been set to "dual," so the second "__type" should run and import "menu-main-mobile.less" inside a "not desktop" media query.
It does seem to import fine, but the file doesn't compile to CSS. When I comment out the import from the first "__type", everything works fine, so the problem seems to be having two imports of the same file...
It shouldn't be a problem because only one "__type" can ever run, so I'm not sure what the issue is.
Anyone have an idea?
Thanks!
.Menu-Main();
#Menu-Main: on;
.Menu-Main (#Menu-Main: on) when (#Menu-Main = on) {
#import 'menu-main.less';
#type: #nav-main-type;
.__type () when (#type = mobile) {
#import 'parts/menu-main-mobile.less';
}
.__type () when (#type = dual) {
#media #q-dt {#import 'menu-main-desktop.less';}
#media #q-ntdt {#import 'parts/menu-main-mobile.less';}
}
.__type();
}
Related
Destructing the file and all import to the tailwindcss.css file. It failed when i import from other file instead write it in tailwind.css.
Use layer to apply custom font family and text-3xl (working in this way)
// tailwind.css
#tailwind base;
#layer base {
h1 {
#apply font-heading text-3xl;
}
}
#import from outside css file, it cannot work as usual. The font-heading is work, but font-size(text-3xl) is not working.
#tailwind base;
#layer base {
#import "./fonts/index.css";
}
// fonts/index.css
h1 {
#apply font-heading text-3xl
}
What i guess:
it load #import css first before load #tailwind base, default base will overwrite my h1 font-size to tailwindcss default.
Do any workaorund could avoid this behavior in tailwindcss? it look messy if all style in tailwindcss file.
https://stackoverflow.com/a/74943254/11710789
Also posted there ^^^
I found something that seems to work for me.
Basically postcss-import has its own layer system that we can use instead of tailwinds layer system.
#import 'tailwindcss/base' layer(Base);
#import './base/typography.css' layer(Base);
#import 'tailwindcss/components' layer(Components);
#import 'tailwindcss/utilities' layer(Utilities);
#layer Base {
#root {
#apply some-styles;
}
}
In postcss-import#usage it describes using layer() with #import
...
#import 'baz.css' layer(baz-layer);
...
I used uppercase layer names to avoid conflicting with tailwinds layers.
Install postcss-import as described in tailwinds article.
using-with-preprocessors#build-time-imports
Then add layer() to your imports like #import 'tailwindcss/base' layer(Base).
Also rename your #layers calls to something different than tailwinds layers.
For examples you can look any of the test fixtures with layer in the filename.
postcss-import/test/fixtures
UPDATE
The root cause of this is using Create React App.
Because it doesn't allow you to configure postcss.config.js.
So another solution would be to migrate to something else instead.
darekkay/create-react-app-to-vite#migration
tailwindcss.com/issues/1472
tailwindcss/guides/create-react-app
we highly recommend using Vite, Next.js, Remix, or Parcel instead of Create React App
I'm using the highcharts-vue wrapper within my vue project. Things are going smooth except for the fact that I can't get the viewFullscreen option to work.
I've set things up following the docs and included the following within my main.js
import exportingInit from 'highcharts/modules/exporting'`
exportingInit(Highcharts);
The export function is working within my charts. For every chart I've set up the options as follow:
exporting: {
buttons: {
contextButton: {
menuItems: ['viewFullScreen', 'downloadPNG', 'downloadJPEG', 'downloadPDF']
}
}
}
alle the buttons ar visible and working except for the viewFullscreen button. that one isn't showing.
Following the docs from the highcharts api there isn't anything mentioned about having to include extra options or so to make use of the vieFullscreen mode.
Any thoughts on this?
You need to change the first string from viewFullScreen to viewFullscreen:
exporting: {
buttons: {
contextButton: {
menuItems: ['viewFullscreen', 'downloadPNG', 'downloadJPEG', 'downloadPDF']
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/ekr2mw7f/
API Reference: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems
I have one main.less file that imports all the other less files of my project.
I would like to choose which less files should be requested by the browser according to a variable:
#direction: rtl;
.imports(#direction) when (#direction = rtl) {
#import "components/grid.import.less";
#import "components/grid-rtl.import.less";
}
.imports(#direction) {
#import "components/grid.import.less";
}
.imports(#direction);
This works when #direction at the beginning of the file is set to rtl but when it is set to ltr no imported file are requested by the browser.
Let me know how can I achieve importing less files using if/else statement.
Thanks
I have a small problem.
I have index.js
var loc = require('location');
function doClick (){
loc.doIt();
}
in location.js I have these
var dee = 12;
exports.doIt = function() {
alert(dee);
};
Which means that when I click on the button I can get the alert, however, I want to reach these information without a need of click - onLoad - besides I want to return two values not only one.
How I can fix this maybe it has really an easy solution but because I have been working for a while my mind stopped working :)
regards
you should move your location.js to inside app/lib (as module). for example :
// app/lib/helper.js
exports.callAlert = function(text) {
alert('hello'+ text);
}
and then call it in your controller like this :
var helper = require("helper"); // call helper without path and .js extension
helper.callAlert('Titanium');
and your problem should be solved :)
"EXPORTED_SYMBOLS is not an array" Exception flagged when tried to use Components.utils.import("chrome://app/content/app1.js");.
I have a XUL application created and from one of the JS File(say app.js) I tried to include the other JS File as shown above.
Both app.js and app1.js are placed in content folder and also in chrome.manifest file following line is added
"content app content/"
In other JS File (app1.js), I have exported symbols like
var EXPORTED_SYMBOLS = ["Fooinstance"];
var Fooinstance = {
foo: function() {
...
}
}
In app.js,
Components.utils.import("chrome://app/content/app1.js");
// Error: chrome://app/content/app1.js - EXPORTED_SYMBOLS is not an array
...
Fooinstance.foo();
I am running this XUL app on XULRunner 17.0.1 win32 libraries.
I looked through the code in this link https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using
It did not help and if I include it as resource it works however I do not want to include it as part of resource.
Could you someone point out what mistake would be ?
I had this same problem, and I solved it:
1) changing the file extension (.js) by .jsm
2) Adding a first line on your module exporting classes to share. EG:
var EXPORTED_SYMBOLS = ["Xobject"];
function Xobject(){
}
Xobject.prototype.stop = function() {
return 'stop';
}
Xobject.prototype.run = function() {
return 'running';
}
3) Calling this way
Components.utils.import('resource://gre/modules/Services.jsm' );
Components.utils.import("chrome://myFirstAddOn/content/Xobject.jsm");
var myXobject = new Xobject();
alert(myXobject.run());
Hope it help u
For anyone else getting this, another possible reason is a circular dependency. My case was a little different, but I had two JSM files each using Components.utils.import to import each other. Then I got this error in one of them.