I am evaluating Svelte with Bootstrap/Sveltestrap and a Bootswatch theme.
I need to support an offline use case, which means Bootswatch's fonts can't be loaded from google via a CDN.
So i configured svelte-preprocess and sass, but when compiling my app.scss I get this error:
[plugin:vite:css] expected ")".
╷
9 │ #import url(../node_modules/.pnpm/bootswatch#5.2.0/node_modules/bootswatch/dist/lumen/$web-font-path);
│ ^
╵
node_modules/.pnpm/bootswatch#5.2.0/node_modules/bootswatch/dist/lumen/_bootswatch.scss 9:15 #import
src/app.scss 5:9 root stylesheet
app.scss
$web-font-path: false;
#import 'bootswatch/dist/lumen/_variables.scss';
#import 'bootstrap/scss/bootstrap.scss';
#import 'bootswatch/dist/lumen/_bootswatch.scss';
main.ts
import './app.scss';
import App from './App.svelte';
const app = new App({
target: document.getElementById('app'),
})
export default app;
Based on my understanding of bootswatch#573 & bootswatch.com/help setting $web-font-path: false should disable the #import in _bootswatch.scss, but that obviously isn't the case. Somehow $web-font-path is not falsey inside _bootswatch.scss.
The top of _bootswatch.scss
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght#0,300;0,400;0,700;1,400&display=swap" !default;
#if $web-font-path {
#import url($web-font-path);
}
Any one have any ideas? Is svelte somehow mangling the SASS variable? Trying to maintain the ability to customize the theme via SASS variables, and disable external font loading.
Related
I'm learning SCSS following a freecodecamp tutorial, but I keep getting the following error on the CLI for live sass: watch:
Error: Undefined mixin.
╷
320 │ #include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 320:1 #use
node_modules\bootstrap\scss\bootstrap.scss 11:1 #import
scss\_custom.scss 58:8 #use
scss\style.scss 1:1
Could anyone that is more experienced in SASS point me in the right direction, I have no idea what to do from here. Do I need to add imports our #use to the custom.scss?
I had this problem. My issue was that I was importing in the wrong order:
#import '../node_modules/bootstrap/scss/mixins';
#import '../node_modules/bootstrap/scss/functions';
#import '../node_modules/bootstrap/scss/variables';
I got rid of it by changing it to
#import '../node_modules/bootstrap/scss/functions';
#import '../node_modules/bootstrap/scss/variables';
#import '../node_modules/bootstrap/scss/mixins';
You need these three imports in this specific order. You are probably missing one of the imports or wrote it in the wrong order too.
I just ran into this issue. You also need to include functions.css.
https://github.com/twbs/bootstrap/issues/23451
I'm coming to you because I would like to use the Tabulator http://tabulator.info/ library in a Laravel project. I have correctly installed the library in my project (import of css and js scripts).
Terminal :
npm install tabulator-tables
resources/js/app.js:
window.Tabulator = require('tabulator-tables/dist/js/tabulator.js');
resources/js/app.scss:
#import 'variables';
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
#import "../../node_modules/tabulator-tables/dist/css/bootstrap/tabulator_bootstrap.min.css";
And to stylize the tables a bit, Tabulator provides a system to use sass variables.
resources/js/_variables.scss:
$backgroundColor:black;
$headerBackgroundColor: #3F3F3F;
$headerTextColor: #fff;
$borderColor:#FFE6;
$rowTextColor: #000000;
$rowSelectedBackground: #FFE6A8;
#import "../../node_modules/tabulator-tables/dist/css/tabulator_simple.min.css";
But as indicated in the documentation http://tabulator.info/docs/4.9/style#sass, it is enough to override the variables used by the library to style the tables. But when I do npm run dev, no changes are made. Would you have an idea ?
Sorry i have noticed that i import the wrong file in resources/scss/app.scss.
//wrong way
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
//good way
#import "../../node_modules/tabulator-tables/src/scss/tabulator_simple";
I am using Parcel with SASS, and I am trying to use the material-components-web
(MDC Web).
In the guide of MDC Web they say you should import the modules that come with this package like this inside your stylesheets:
#import "#material/textfield/mdc-text-field";
But when I try this and I run parcel, I get this error message:
Can't find stylesheet to import.
╷
2 │ #import "#material/textfield/mdc-text-field";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
main.scss 2:9 root stylesheet
Error: Can't find stylesheet to import.
so when I change the line to the following, with the tilde operator
#import "~#material/textfield/mdc-text-field";
it finds the stylesheet to import, but the referenced stylesheet mdc-text-field, that is inside the nodes_modules, tries to load other stylesheets without the tilde operator, so I get an other error like this:
Can't find stylesheet to import.
╷
23 │ #import "#material/animation/variables";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\#material\textfield\mdc-text-field.scss 23:9 #import
main.scss 2:9 root stylesheet
Error: Can't find stylesheet to import.
So how can I fix this problem?
Create a .sassrc.js file and add the following lines.
const path = require('path')
const CWD = process.cwd()
module.exports = {
"includePaths": [
path.resolve(CWD, 'node_modules')
]
}
You can refer this
I hope this answer helps.
I tried to install CoreUI in my Laravel project using webpack.mix.js. I used the following for style and icons.
// CoreUI Icons Set
#import '~#coreui/icons/css/coreui-icons.min.css';
/* Import Font Awesome Icons Set */
#import '~font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
#import '~simple-line-icons/scss/simple-line-icons.scss';
/* Import Flag Icons Set */
#import '~flag-icon-css/css/flag-icon.min.css';
/* Import Bootstrap Vue Styles */
#import '~bootstrap-vue/dist/bootstrap-vue.css';
// If you want to override variables do it here
#import "variables";
// Import styles with default layout.
// If you are going to use dark layout please comment next line
#import "~#coreui/coreui-pro/scss/coreui";
// Import styles with dark layout
// If you want to use dark layout uncomment next line
//#import "~#coreui/coreui-pro/scss/themes/dark/coreui-dark";
// If you want to add something do it here
#import "custom";
// ie fixes
#import "ie-fix";
When I compile code using Laravel Mix I get the following error.
Error: Conflict: Multiple assets emit to the same filename
fonts/vendor/#coreui/icons/CoreUI-Icons-Linear-Free.eot?089ab3c11c572362d088083c561cfa55
I found some solutions on the internet, but they don't work in my case.
This had to do with a Webpack update. Ran into the same issue, just unlucky timing.
Try this.
npm install webpack#4.40.2 --save-dev
rmdir node_modules /Q /S
npm install
npm run prod
I am practicing sass in my code editor. When I tried to compile my sass file and built a watcher. I receive:
Jiatongs-MacBook-Pro:6_myLandingPage_starter jiatongli$ sass --watch sass:css
Error: Undefined variable.
background-color: $white
^^^^^^
sass/modules/_navbar.sass 3:21 #import
sass/modules/_modules-dir.sass 1:9 #import
sass/app.sass 3:9 root stylesheet
Because I cannoStackOverflow files here on stackoverflow, I link my github repository which is:
https://github.com/riederleeDEV/SASS-project.git.
It seems like the sass watcher cannot capture my file import and I do
not know where went wrong
Here is the command I used: sass --watch SASS:CSS(the command should not have any error)
After I checked the file, I discovered that there is nothing wrong with my app.sass import nor the typo. Just want to ask where I went wrong?
Try this:
<···· Move variables to top
#import "base/base-dir" |
#import "layout/layout-dir" |
#import "modules/modules-dir" |
|
#import "variables" ············
#import "mixins.sass"