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);`
Related
In my vuejs component I have style like this
<style>
.preview-page {
.preview-section {
width: 100%;
}
.logo-section {
text-align: center;
}
}
</style>
Its building fine and showing correct results in browser, but on vscode its showing 2 errors
Do not use empty rulesetscss(emptyRules)
and
} expectedcss(css-rcurlyexpected)
OK, looks like there are two issues being picked up on:
Do not use empty rulesetscss(emptyRules) is a valid complaint, since .preview-page{} contains no styles (although its children do). Add some styles to .preview-page or suppress the warning if it bothers you.
} expectedcss(css-rcurlyexpected) I assume is triggering because you have not defined lang="scss" in your <style> tag. Here is the documentation.
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;
}
}
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
I am learning Sass over here and would like to get support in understanding why does this prefixing attribute not working when referencing variables when forwarding scss files.
I am using dart-sass with react.js taking the advantage of package-aliasing over node-sass so I can use #use, etc.
I cannot use this on codesandbox in order to replicate the issue, so I will post the code down here:
At src/library I have 2 partial scss files and one index.scss file to #forward my stuff:
_variables.scss
$color: darkgreen;
_mixins.scss
#mixin box-structure {
width: 50vw;
height: 50vw;
background-color: yellow;
margin: 0;
}
index.scss
#forward 'mixins' as mix-*;
#forward 'variables' as var-*;
the index.scss file is imported to a dummy react component, just to play around with the features and understand how things work.
Here is the Child1.js file and subsequently the Child1.scss file:
Child1.js
import React from 'react';
import './Child1.scss'
export default function Child1(props) {
return (
<div className="Child1">
<h2>Child 1 Title</h2>
</div>
)
}
Child1.scss
#use '../library/index.scss' as i;
#function invert($color, $amount: 100%) {
$inverse: change-color($color, $hue: hue($color) + 180);
#return mix($inverse, $color, $amount);
}
$primary-color: #036;
.Child1 {
#include i.mix-box-structure; //this works as intended
background-color: invert($primary-color);
h2 {
color: i.var-$color; //here is where the error occurs
}
}
As demonstrated above, I import index.scss as i and apply it on two places in Child1.scss:
When I use it to apply a mixin it works just fine, but when I try to apply the prefix to use a variable I get the following error:
SassError: expected "(".
╷
14 │ color: i.var-$color;
│ ^
I guess it is not accepting the $ after the dash. I tried placing the variable using string-interpolation with no success. Would it be a react.js issue?
Thanks in advance!!
I think the Problem is the application of the forwarding prefix. you need to add it after the $ like:
color: i.$var-color
It looks weird but if i remember correctly thats how forwarding prefixes work in sass.
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)