So I'm trying to include a string globalvar on the command line. According to the docs ( http://lesscss.org/usage/ ), it should be straightforward:
lessc --global-var="my-background=red"
However, if the value is a string (instead of a CSS colour in the example), it needs to be quoted, giving:
lessc --global-var="staticbase='static'"
But running that against my less file gives me:
NameError: variable #staticbase is undefined in /tmp/tmpoRLm7A on line 336, column 133:
336 ul.popular { background: url('#{staticbase}/background.jpg') 0 0 no-repeat; }
I've tried a variety of ways of escaping the various quotes, but nothing seems to work. The same less file compiles fine using the client-side library, with less.globalVars['staticbase'] set.
Related
First time using this set up, but I can't seem to figured out why the .scss file won't compile after I add any styles.
I added
.test { color: #fff; }
And you can see in cmd line that it's not compiling, but I can't seem to figure out what it wants me to do.
ERROR in src/stylesheets/styles.scss
3:5 ✖ Expected indentation of
2 spaces indentation
4:1 ✖
Unexpected missing end-of-source newline
no-missing-end-of-source-newline
cmd line screenshot
It appears to be asking for a 2 space indentation, you have either 4 spaces or a tab, so change that to 2 spaces and it also seems to be asking for a line feed at the end and you have none, so just add one of those and try again.
It just needed one more extra line to be left as seen below
Situation:
I am trying to use bootstrap 4 stylesheet with NextJS. The bootstrap 4 stylesheet (which is complied from SASS) has many codes like:
.checkbox.checkbox-accent > span {
border-width: !important;
}
which breaks the production build of NextJS, i.e. when issue yarn build I get the following error:
yarn run v1.22.4
$ next build
info - Creating an optimized production build
Failed to compile.
TypeError: Cannot read property 'toLowerCase' of undefined
> Build error occurred
Error: > Build failed because of webpack errors
at /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/index.js:441:19
at async /home/musa/codes/paisaha/finance-nextjs/node_modules/next/dist/build/tracer.js:1:1441
error Command failed with exit code 1.
However when I add a value before the !important in CSS the build problem is gone, e.g:
.checkbox.checkbox-accent > span {
border-width: unset !important;
}
Question:
What does !important without a value mean and is it a valid CSS piece of code? Or is it a problem with SASS compilation? Or it is something with webpack compiler used by NextJS?
Notes:
yarn dev works fine
"dependencies": { "next": "10.0.6", "react": "17.0.1", "react-dom": "17.0.1" }
NodeJS version: v12.18.2
Platform: WSL2 on Windows 10
I tested !important in a sass file(in vs code) without any property value and it yelled at me:
property value expectedscss(css-propertyvalueexpected)
So, it hasn't any special meaning. I think there may be a problem in your code before compilation that generates this line of code.
I think you’re missing variables.
Check what the original SASS is. It’s probably something like:
border-width: $border-width !important;
But your value for the $border-width variable is an empty string (if it were completely undefined it wouldn’t compile)
I've recently started playing around with the closure compiler and ES6, and I've noticed something that I think is a bit strange. When I compile the following code:
export class Test
{
constructor(arg)
{
this.arg = arg;
}
}
class Test2
{
constructor(diffArg)
{
this.diffArg = diffArg;
}
}
I get this output when I compile with ADVANCED:
java -jar closure-compiler-v20170910.jar --compilation_level ADVANCED --language_in ECMASCRIPT6_TYPED --language_out ECMASCRIPT5 --js_output_file ui.js --js javascript/*.js --externs javascript/externs/externs.js --jscomp_off missingProperties
Test.js:11: WARNING - Function and method overloads are not supported and type information might be lost
constructor(diffArg)
^^^^^^^^^^^^^^^^^^^^^^
Test.js:5: ERROR - variable arg is undeclared
this.arg = arg;
^^^
It looks like the compiler is complaining because there are two functions with the same name in the file - even though they are in different classes - and the error comes in because the second function replaces the first. If I compile with SIMPLE, I get the warning but not the error, and the emitted code seems to contain the second constructor definition. To get the code to compile properly, I need to put each class into its own file.
My question is whether this is expected behavior or not - I don't believe that there is anything in the ES6 spec about only having one class per file, and since each function is in a different class, I would have expected that I can use the same name for each of them (especially for the constructor). Is there a way to get around this, or is having each class in its own file the right way to go?
I am trying to set up a SCSS transpiler in PyCharm for Django project.
Basically, what I need is to convert /static/scss/main.scss to /static/css/main.css
Here are the configurations of SCSS File Watcher:
Program: /home/maverick/.rvm/gems/ruby-2.2.3/bin/scss
Arguments: --no-cache --update /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
Working directory: /home/maverick/Documents/DjangoProjects/timberg/static/scss
Output paths to refresh: /home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
What is happening is that main.css is being generated where it should. But it contains only errors, not the expected css, like this:
/*
Error: Inconsistent indentation: 2 spaces were used for indentation, but the rest of the document was indented using 8 spaces.
on line 39 of /home/maverick/Documents/DjangoProjects/timberg/static/css/main.css
and etc.
What is wrong here? How can I fix it?
The problem was in the Arguments part.
It should be:
$FileName$:/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
not just:
/home/maverick/Documents/DjangoProjects/timberg/static/css/$FileNameWithoutExtension$.css
My mistake was leaving out $FileName$: at the beginning.
In my LESS project I am having issues getting my guarded mixins working with variables that I declared in another file. Here is the code I am working with:
_defaults.less (contains all of my variables)
//------------------------------------//
// #INCLUDE
//------------------------------------//
// Set whatever components you want included
// in your project to `true` and any components
// you do not wish to be included to `false`
// Base
#use-main: true;
_main.less (just a random partial in my project)
.main(#boolean) when (#boolean = true) {
// Styles go here
}
// Execute mixin
.main(#use-main);
style.less (imports all of my partials)
//------------------------------------//
// #IMPORTS
//------------------------------------//
// Base styles
#import "base/_main.less";
This is how my project is structured (for around 20 partials that are then imported into the style.less file).
Whenever I try to compile my project, I get this error:
Unrecognised input
c:\Users\Keenan\Documents\GitHub\concise.css-less\less\base_main.less line 1
c:\Users\Keenan\Documents\GitHub\concise.css-less\less\concise.less
The code you pasted is correct. In fact you are misled by lessc error message. It refers to the #main block. It seems the issue you are facing is related to your project Concise.css-less and more precisely this line.
#if #global-border-box == true {
// [...]
}
This is not the proper syntax for if statements in less. See question:
How to use if statements in LESS
It seems you are converting a project from stylus to less. I would suggest cutting large chunks of files that fail to import to find out, through bisection, the lines that less doesn't recognize. Alternatively, you could comment the top mixins guards that are used here to include this or that part of the css, and that confuse less for error reporting.
For example, if you comment the first and last lines of file _lists.less:
//.lists(#boolean) when (#boolean = true) {
[...]
//.lists(#use-lists);
lessc will report the error near the proper line (actually it's > on line 111 that it doesn't like):
ParseError: Unrecognised input in concise.css-less/less/base/_lists.less on line 109, column 9:
108 .breakpoint(small) {
109 dl.dl-horizontal {
110 overflow: hidden;