Using VueJS to build an application. Everything has gone pretty well, and much has been done already. Suddenly, this error is happening. I've rolled back as far as I can reasonably and still see this error - I do no know what could have changed in the configuration that would cause this to suddenly appear.
Invalid CSS after "/* banners */": expected expression (e.g. 1px, bold), was "#mixin banner-red-t"
in C:\Projects\MyTestVueProject\src\App.vue (line 1534, column 1)
The file in question with this error is .scss and starts like this:
/* banners */
#mixin banner-red-text{
font-family:$font-family-primary;
font-weight:$font-weight-regular;
font-size:42px;
color: $red;
line-height:50px;
}
I have not a single .sass file in the entire project. Every component has lang="scss", style-resource-loader is set to preProcessor: 'scss' and every file involved has the .scss extension.
And yet, I get this error otherwise attributed to trying to compile SCSS as SASS everywhere else someone has asked.
I am using the node-sass and sass-loader packages, but these appear to be the correct packages to use for scss compilation.
"node-sass": "^4.12.0",
"sass-loader": "^7.1.0",
Has anyone found another reason to see the above error, and hopefully how to fix it? Barring that, any pointers on what else to look at will be taken and used to expand this question.
Another file, loaded immediately before this one in the style-resources-loader, was missing a ; after its final declaration. When the files are pre-loaded it is causing the singular virtual chunk of scss to be malformed.
Leave it to me to figure it out 25 seconds after I posted the question.
Related
I need to make a Vue.js site with a JavaScript Ink interpreter. The only one that seems to be production-ready is Ink.js. There are two ways to import it. One is in its TypeScript format, but my Vue setup does not use TypeScript. I could add it, maybe, although I'm not sure I want to. If I import the TypeScript libraries from Yarn, no matter which object I import, it shows up with a value of undefined in my code.
Then there is a pure es5 script available, that seems to be a transpiled version of the first one, but when I try to import that one, I get this error, I think from Babel:
Uncaught SyntaxError: Unexpected token '!'
cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Ink.vue?vue&type=script&lang=js&:39 Uncaught SyntaxError: Unexpected token '!'
at Object../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Ink.vue?vue&type=script&lang=js& (app.js:962)
My guess is that Babel is set up for es6 or es7 and the pure is5 file brings up some unexpected syntax. I tried to change babel.config.js, but I've found no option that's kept Vue.js from complaining. What am I doing wrong?
After many failed attempts, I went around the problem in the following way: I imported the Story object directly from the library:
import { Story } from '../../node_modules/inkjs/engine/Story';
// ...
let story = new Story(storyText);
I know it's not what the documentation recommends, but it works. And it seems everything else that needs to be imported is, because when I try to read story.currentChoices I get an array of Choice objects that are in turn perfectly readable.
So this works for me. If anyone else runs into this problem, I'm not saying it's the right solution, I'm just saying that's what I finally ended up doing.
I am attempting to change the styling of Sanity Studio as noted here in the docs: https://www.sanity.io/docs/styling#d7f9b5cc2adb
As such, I have created a file with the following css variables:
#import "part:#sanity/base/theme/variables/gray-colors-style";
:root {
--fieldset-border: none;
--fieldset-bg: var(--gray-darker);
}
Now, this works as I want for --fieldset-border, but it does not work for --fieldset-bg. I even tried hard-coding the value of --fieldset-bg as follows: --fieldset-bg: #454545; -- it still did not work.
So, I am wondering, why does --fieldset-border work and --fieldset-bg not work. More importantly, what do I have to do so that I can change the background color of fieldsets in sanity studio?
I have a hunch that the specific --fieldset-bg variable got silently deprecated recently (the move from #sanity/components to #sanity/ui). IF that's the case, opening a bug report issue in sanity-io/sanity repository would be great!
Regardless if that's the case, I'd suggest overwriting the css with a global selector in your variableOverrides.css file:
div[class^="DefaultFieldset_root"] {
background: papayawhip;
}
Hope this helps 🙌
I've created a mixin that looks like this:
.elem( #map1, #name ){
#color: #map1[color];
color: #map2[$#color];
}
WebStorm underlines dollar sign $ as an error (and all the path to the file). Everything works in the project, but this makes me anxious whether I've followed the best practices or not.
Does anybody know how to safely get rid of this?
This LESS feature is not yet supported, please follow WEB-39083 for updates
Switching from "bootstrap": "~4.0.0-beta.2" to "bootstrap": "^4.0.0" added new variables in the _variables.scss. Boostrap classnames only change when there is a major version upgrade (AFAIK), but does the same apply to _variables.scss too?
It would change how we share the _variables.scss accross our application.
Does variable names change between releases?
The variable names shouldn't change as Bootstrap 4 is now in "real" release (out of beta).
The variables are there for a good reason: Your CSS shouldn't break when you upgrade. (not counting major versions of course).
Of course new variables can be added, as those shouldn't break your CSS.
If you are in any way unsure before upgrading, you can always check the changelogs. Those should tell about any breaking changes.
Using variables in SCSS
When you have set up your build tools, and created your SCSS file (let's say custom.scss), you can import Bootstrap and override any variable you want (you'll find them in _variables.scss in the Bootstrap source code):
//Your variable overrides
//Let us change the primary color which is set in the primary variable
$primary: #ce40c5;
//In this case we are importing everything
//Here we are using NodeJS with NPM, so your files should be here
#import "node_modules/bootstrap/scss/bootstrap";
Some things to note:
If you aren't using NodeJS, then just make sure that the import path directs to the bootstrap.scss file (don't put .scss in the import)
If you have checked the source code of Bootstrap 4, you may have seen !default after every variable. Don't include that in your override. It just tells Sass that the variable can be replaced
There's a bunch of good information about this in the docs, so feel free to check there if you are missing anything (or ask).
I tried to adopt the Air theme insinde the current IP.
The problem is that the resulting theme.css stays empty, Ithink due to a compilation error.
I have replaces the original less files of the theme inside the assets/less-subfolder by the twitter Bootstrap less files.
As soon as I include more than ipContent.less and variables.less (for example the original Bootstrap grid.less) the resulting css file becomes empty.
Does anybody have an idea? It's not a file permission issue that's sure.
Something about missing variables I suppose.
Thank you and cheers from Hamburg,
Thomas