I created an :extend expression following the LESS documentation. But gulp-less doesn't compile it.
What's wrong with these expressions?
html
{
&:extend(body);
}
body
{
height: 100%;
}
or
html:extends(body)
{
}
body
{
height: 100%;
}
This could be due to an outdated version of gulp-less
Try run this NPM command:
npm update gulp-less
It will update your package and should include all the latest functionality.
Unfortunately it has been a typo I gave. It shouldn't have read extends.
Probably that's been the cause for the upper version not working, too. Although I have written it correctly here, I might have misspelled it in my code.
Got that hint from the gulp-less forum on GitHub.
Related
I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !
I'm trying to create a SVG component.
I have this problem after run command "npm i".
I think versions between packages aren't compatible.
How to fix this or create SVG component without react-native-svg package?
Thank a lot.enter image description here
Add the following to package.json:
{
// scripts, dependencies, etc.
"resolutions": {
"css-what": "5.0.1"
},
}
Remove lock file. Install the packages. Check if the app is still working. If works then keep the configuration (and ignore the warnings) else revert it.
Since you are using npm, you may wanna first refer this thread: npm equivalent of yarn resolutions?
I use vue and when I run it, there is a warning. I tried npm update without luck. How to get rid off it?
vue-cli-service serve
WARN A new version of sass-loader is available. Please upgrade for best experience.
Serg already gave the answer in comment. It's worked for me. Adding the answer for others. Hope it will help others.
Just run this command
npm i sass-loader#latest
You can update your packages via using yarn upgrade-interactive --latest, in case of sass-loader, if you have upgrade it from 7 to 9, you may have some invalid options erros which you can fixed in below steps as I've explained before: https://stackoverflow.com/a/62844942/12666332
Problem
Based on https://github.com/vuejs/vue-cli/issues/4513, And If you have upgrade your sass-loader from v7 to 8 or 9, You may have faced with th validation-error for invalid options
vue.config.js(valid syntax for sass-loaderv7 in webpack)
css: {
loaderOptions: {
sass: {
data: `#import "#/assets/styles/variables/index.scss";`
}
}
}
errors
object:
ValidationError: Invalid options object. Sass Loader has been
initialized using an options object that does not match the API schema.
- options has an unknown property 'data'. These properties are valid:
sass-loader v8.0 Breaking Changes
You should know that v8. has below breaking changes :https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0
minimum required webpack version is 4.36.0
minimum required node.js version is 8.9.0
move all sass (includePaths, importer, functions) options to the
sassOptions option. The functions option can't be used as Function,
you should use sassOption as Function to achieve this.
the data option was renamed to the prependData option default value
of the sourceMap option depends on the devtool value (eval/false
values don't enable source map generation)
Solution v8
As the docs says, move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this.
the data option was renamed to the prependData option
sass-loader v9.0 Breaking Changes
You should know that v9. has below breaking changes :https://github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0
BREAKING CHANGES minimum supported Nodejs version is 10.13
prefer sass (dart-sass) by default, it is strongly recommended to
migrate on sass (dart-sass)
the prependData option was removed in favor the additionalData
option, see docs
when the sourceMap is true, sassOptions.sourceMap,
sassOptions.sourceMapContents, sassOptions.sourceMapEmbed,
sassOptions.sourceMapRoot and sassOptions.omitSourceMapUrl will be
ignored.
Solution v9
In ver9 as you can see in the docs https://github.com/webpack-contrib/sass-loader#options (https://github.com/webpack-contrib/sass-loader#sassoptions , https://github.com/webpack-contrib/sass-loader#additionaldata), if we change data to additionalData if will fix the invalid options errors.
css: {
loaderOptions: {
sass: {
additionalData: `#import "#/assets/styles/variables/index.scss";`
}
}
}
I'm developing a project using font-awesome and HarpJS. I'm just using the pre-compiled CSS version of font-awesome, but since I'm using bower it downloads even the LESS files to my components folder.
The problem is, when I need to compile my assets to a dist folder with harp compile, it gives me this error:
{
"source": "Less",
"dest": "CSS",
"filename": "/Users/***/lib/fontawesome/less/bordered-pulled.less",
"lineno": 4,
"name": "NameError",
"message": "variable #fa-css-prefix is undefined",
"stack": "// Bordered & Pulled\n// -------------------------\n\n.#{fa-css-prefix}-border {\n padding: .2em .25em .15em;\n border: solid .08em #fa-border-color;\n border-radius: .1em;\n}\n\n.pull-right { float: right; }\n.pull-left { float: left; }\n\n.#{fa-css-prefix} {\n &.pull-left { margin-right: .3em; }\n &.pull-right { margin-left: .3em; }\n}\n"
}
This error is happening because HarpJS is trying to compile the LESS files that came with the font-awesome's bower package. After some research, I found this answer, which points me to a page of the font-awesome documentation that says:
Page: http://fontawesome.io/get-started/#custom-less
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
Example:
#fa-font-path: "../font";
But I can't edit any file like this, since my dependencies are installed using bower and I don't check them in the repo. Even if I did check them in, that change would be overriden as soon as someone uses bower install to get an updated version of font-awesome.
What workaround would you use for this situation?
TIP: You can reproduce this just by doing:
$ mkdir test
$ cd test
$ bower init
$ bower install --save font-awesome
$ harp compile . dist
I just did some research around this issue and I believe the easiest way to fix this issue is by specifying a custom bower_components directory.
Found in this answer a way to do just that:
Create a file .bowerrc in the project root with the content:
{
"directory" : "_bower_components"
}
Run bower install again.
Harp doesn't compile directories/files that start with underscore (_), so if you name the directory _bower_components, it will successfully ignore it.
The problem with this approach is that those files will not be public, so you might have to create a new public file that imports the file(s) from font-awesome.
Something like:
#import "_bower_components/font-awesome/css/font-awesome.css"
There's a ticket open in harp’s issues where they're trying to find a way to ignore files or directories (similar to .gitignore), but it hasn't been implemented yet.
You might still have to figure out what to do with the font files. Hope it helps in any way to move you forward.
I use dotless 1.3.1.0 compiling less-files. This worked fine with bootstrap 2.x, but after switching to bootstrap 3.0.0 (downloaded the source from here: http://getbootstrap.com/getting-started/), I suddenly get this error:
Expected ')' but found ' ' on line 47 in file 'mixins.less': [46]: //
Sizing shortcuts [47]: .size(#width; #height) {
------------^ [48]: width: #width;
Seems that having a ; as seperator between parameters is not valid less. The original source in the mixins.less looks like this:
...
// Sizing shortcuts
.size(#width; #height) {
width: #width;
height: #height;
}
...
Do I have to use an updated less compiler? Or did bootstrap release buggy less source?
UPDATE 1: I can see, that a pull request for dotless exists, fixing the problem with ;
https://github.com/dotless/dotless/pulls
"Fixes for ; not supported in mixin parameter lists #319 #320"
I will go using the css files until this has been fixed in dotless.
If you check out bootstrap's getting started page, you'll find that they state:
LESS compilation
If you download the original files, you need to compile Bootstrap's
LESS files into usable CSS. To do that, Bootstrap only officially
supports Recess, Twitter's CSS hinter built on top of less.js.
Though not using dotless, I followed a similar path that you did using lessc, and then found that using recess resolved my issue. Perhaps using recess would be an option for you too?
As an example, I have a file called tmpfl.less with the following contents:
#import "mixins.less";
#import "variables.less";
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
If I run lessc on it, I get the following result:
lessc tmpfl.less
NameError: .size is undefined in mixins.less:47:0
46 // Sizing shortcuts
47 .size(#width; #height) {
48 width: #width;
Now, I successfully use recess as follows:
recess --compile tmpfl.less > tmpfl.css
Update:
In order to utilize Recess in a .Net environment, specifically in Visual Studio, one can follow these instructions for details on installing. Those instructions provide an overview, but perhaps leave out some details on getting Node.js installed. Microsoft has some brief words about it and they link to a GitHub project which might be helpful depending on your version of Visual Studio.
If you don't go down the Node.js-in-Visual Studio route, then really the main goal is to have Node.js installed somewhere, and then ultimately npm, the package manager for Node.js so you can install Recess. That can be achieved on Windows by going to the Node.js download, and installing the Windows version. Installing npm is highlighted in this stackoverflow discussion. Once installed, you just need to run npm to install Recess as follows:
npm install recess -g
That is also discussed in the first link of this update.
One of my colleagues that uses dotless has had a few fixes for Bootstrap 3 issues merged. Apparently Bootstrap3 will now compile with the latest code :)
https://github.com/dotless/dotless/commits/master
I expect an updated NuGet package will be available soon (based on this tweet)
After spending hours on getting this to work myself i found that dotless is quite useless at this time.
but here is where you can impliment Less and Bootstrap 3 Less in your mvc ASP.Net Project
http://www.tomdupont.net/2013/10/bootstrap-3-less-bundling-and-aspnet-mvc.html?showComment=1386250367416#c1439130135847828203
This guy just won an internets in my book and if you can track down his stack exchange account for me let me know.
I have put together an httphandler which will compile less using lessjs.
It's more of a proof of concept than production quality code, however it may be useful for some people as a starting point.
You can find the source here:
https://bitbucket.org/martinbooth/clearscriptless
In case anyone is interested in trying to do this using jurassic, you can find my attempt here:
https://bitbucket.org/martinbooth/jurassicless
I don't recommend Jurassic for this because
it required a few bug fixes to the library which are not currently
integrated into the main project My changes are now in the master branch of Jurassic so this is no longer an issue (though the latest release does not currently include them)
it is very slow, hence the
reason I tried clearscript