I have following Sass script:
#import "../../../../global_css/variables/variables";
.heading .sectionAbout {
padding: $padding-top-viewport 0;
margin-top: calc(-1 * (#{top-viewport-height} - #{clip-background-height}));
background: $color-grey-light-1;
}
When I try to run the build file in react using yarn build ("build": "react-scripts build",), I get an error:
yarn run v1.22.5
$ react-scripts build
Creating an optimized production build...
Failed to compile.
Lexical error on line 1: Unrecognized text.
Erroneous area:
1: -1 * (top-viewport-height - clip-background-height)
^........^
CompileError: Begins at CSS selector undefined
My node-sass version is "node-sass": "4.14.1". How do I get rid of this irritating error to proceed with my build?
You need to include $ before your variable. I believe this is missed out for the two variables used inside calc function
Try
#import "../../../../global_css/variables/variables";
.heading .sectionAbout {
padding: $padding-top-viewport 0;
margin-top: calc(-1 * (#{$top-viewport-height} - #{$clip-background-height}));
background: $color-grey-light-1;
}
Ref:- https://sass-lang.com/documentation/interpolation
Related
I have a node 18.7.0 project that uses nuxt 2.15.8. I have the following scss code inside my vue component
<style lang="scss">
.Accordion {
--Accordion__margin-top: 2.5rem;
&__items {
margin-top: calc(var(--Accordion__margin-top) * -1);
}
}
</style>
When I run a nuxt build I get a postcss error with not much detail except
syntax error at line 1
If I change simply the line like so it works
margin-top: var(--Accordion__margin-top);
What is wrong with my syntax?
I solved it by adding a new variable $margin-top
then updated the problem line as follows
$margin-top :2.5rm;
`margin-top: calc(margin-top * -1);`
The error content:
Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
You must put any #use line of code above others.
For example the code below throws error:
.button {
#include corners.rounded;
padding: 5px + corners.$radius;
}
#use "src/corners";
But this code will work fine:
#use "src/corners";
.button {
#include corners.rounded;
padding: 5px + corners.$radius;
}
Remember that #use in the middle lines will throw error even if you don't use anything from the file.
When creating a table, I want to use border-spacing: 0 15px;. But I found that there is no corresponding utility in TailWindCSS. So I want to create a utility, my approach is like this:
#layer utilities{
.border-spacing-0: {
border-spacing: 0 15px;
}
}
Then terminal reported me an error:
[vite] Internal server error: Expected a pseudo-class or pseudo-element.
Plugin: vite:css
File: F:/LearnCode/Front-end/Project/xust-admin/xust_kcsoft_admin/src/index.css
at Root._error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:174:16)
at Root.error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\selectors\root.js:43:19)
at Parser.error (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:740:21)
at Parser.expected (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1129:19)
at Parser.pseudo (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:875:19)
at Parser.parse (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1080:14)
at Parser.loop (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:1039:12)
at new Parser (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\parser.js:164:10)
at Processor._root (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\processor.js:53:18)
at Processor._runSync (F:\LearnCode\Front-end\Project\xust-admin\xust_kcsoft_admin\node_modules\postcss-selector-parser\dist\processor.js:100:21)
But the strange thing is I just create a project a few days ago. It used the same approach and it also use TailWindCSS in vite. And it succeeded.
You should remove colon : after .border-spacing-0
Then Your error will disappear ;-) Here You can read more about it.
#layer utilities {
.border-spacing-0 {
border-spacing: 0 15px;
}
}
My CSS sheet is required to reset some Bootstrap 3 preset values to make my desired style, thus I need utility classes like .m-b-0 which set margin-bottom:0px.
But Less compiler I was using in grunt wont recognize classes .m-b-0 generated by loop when I nested them in other class, but classes like .m-b-1 and .m-b-10 will be recognized correctly.
The loop code in my Less files is like this:
.m-loop (#i) when (#i <= #iterations) {
.m-#{i}{
margin: ~"#{i}px";
}
.m-h-#{i}{
margin-left: ~"#{i}px";
margin-right: ~"#{i}px";
}
.m-v-#{i}{
margin-top: ~"#{i}px";
margin-bottom: ~"#{i}px";
}
.m-l-#{i}{
margin-left: ~"#{i}px";
}
.m-r-#{i}{
margin-right: ~"#{i}px";
}
.m-t-#{i}{
margin-top: ~"#{i}px";
}
.m-b-#{i}{
margin-bottom: ~"#{i}px";
}
.m-loop(#i + 1);
}
.m-loop(0);
and I use the classes supposed to be generated in the same less file like this:
.panel{
.m-b-0;
}
Then my compiler throwed
Running "less:production" (less) task
>> NameError: .m-b-0 is undefined in ../css/less/stylesheet.less on line 237, column 3:
>> 236 div.panel{
>> 237 .m-b-0;
>> 238 }
Warning: Error compiling ../css/less/stylesheet.less Used --force, continuing.
Is this forbidden to use zero valued iterator in Less compiling or where did I take it wrong? Thanks!
Looks like there might be a syntax error. I don't see an opening brace on this line:
.m-t-#{i}
See if that helps.
I'm trying to convert a [www.bootswatch.com][1] theme from less to scss for my rails app.
Problem is I'm no expert on either SCSS or LESS :(
I've read up on some of the differences and I've figured variable differnces using # and $
I've got an issue with the my LESS code , can someone tell me what the snipet below should be when converted SCSS
// Buttons ====================================================================
.btn:active {
.box-shadow(none);
}
.btn-group.open .dropdown-toggle {
.box-shadow(none);
}
// Typography =================================================================
.text-primary,
.text-primary:hover {
color: $brand-primary;
}
.text-success,
.text-success:hover {
color: $brand-success;
}
.text-danger,
.text-danger:hover {
color: $brand-danger;
}
.text-warning,
.text-warning:hover {
color: $brand-warning;
}
When I run my app I'm getting the following message
Invalid CSS after " .box-shadow": expected "{", was "(none);"
You could install the bootstrap SASS for ruby: Bootstrap SASS Gem
But to better answer your question try #extend .box-shadow(none)