I have never actively used sass, but Google's Material Design is written so that I need sass. But I stumbled upon this error and can't find out what is wrong.
Error: Can't find stylesheet to import.
╷
26 │ #use '#material/feature-targeting/feature-targeting';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\#material\theme\_theme.scss 26:1 #forward
node_modules\#material\theme\_index.scss 17:1 #use
Line 26 in _theme.scss looks like this:
#use '#material/feature-targeting/feature-targeting';
This target file is from npm install #material/feature-targeting. Is there something wrong with the file _theme.scss from Google or did I do something wrong? (There is a file node_modules/#material/feature-target/_feature-target.scss. Is perhaps the underscore missing in line 26 in _theme.scss?)
The file I give to sass is this one:
#use "../node_modules/#material/theme" with (
$primary: #fcb8ab,
$secondary: #feeae6,
$on-primary: #442b2d,
$on-secondary: #442b2d,
);
#use "#material/button/mdc-button";
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.
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 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"
I'm using laravel-mix which is built on the top of the webpack. I'm facing a problem with fonts directory. For Example, font-awesome package has a scss file and a font directory where all fonts are placed.
font-awesome:.
├───scss
│ fontawesome.scss
└───webfonts
fa-regular-400.eot
fa-regular-400.svg
fa-regular-400.ttf
fa-regular-400.woff
fa-regular-400.woff2
So i place this package in my resources/assets/sass directory.
resources:.
└───asset
└───sass
│ main.scss
│
└───font-awesome (directory)
main.scss contains code:
#import 'font-awesome/scss/fontawesome';
webpack.mix.js contains:
mix.sass('resources/assets/sass/main.scss', 'public/css/frontend.css');
All assets are compiled successfully. Now public directory has a css and font directory, which has all fonts like this.
public:.
│ index.php
│
├───css
│ frontend.css
│
├───fonts
│ fa-regular-400.eot
│ fa-regular-400.svg
│ fa-regular-400.ttf
│ fa-regular-400.woff
│ fa-regular-400.woff2
But What I want is, I don't want to compile all fonts into public/fonts directory i want to compile as following structure public/fonts/vendor/font-awesome
public:.
├───css
│ frontend.css
│
└───fonts
└───vendor
└───font-awesome
fa-regular-400.eot
fa-regular-400.svg
fa-regular-400.ttf
fa-regular-400.woff
fa-regular-400.woff2
What changes that i need to change in webpack.mix.js file.
If you want to use the laravel-mix and try to change public/fonts to public/assets/fonts directory,
You can use this code in your webpack.mix.js
let mix = require('laravel-mix');
mix.config.fileLoaderDirs.fonts = 'assets/fonts';
Try to copy them directly like this:
mix.copyDirectory('assets/font-awesome/webfonts', 'public/fonts');
Or you can copy files one by one:
mix.copy('assets/font-awesome/webfonts/example.ttf', 'public/fonts/example.ttf');
1. First Create a explicit folder structure:
like this in your laravel project.
public/fonts/vendor/font-awesome
Move all your fonts from font-awesome package to above mention directory.
2. Change $fa-font-path variable value:
font-awesome directory has a file called _variables.scss inside that file there is a variable named as $fa-font-path change the value to something like this.
$fa-font-path: "/fonts/vendor/font-awesome" !default;
Compile your assets it would work.
In addition to #farid-hatami answer, you can also append to the generated URL with.
mix.setResourceRoot('/public')
This is useful if you're running backends like Django where you have to be explicit with your url.
Mix options have changed. Use instead:
mix.options({
fileLoaderDirs: {
fonts: 'assets/fonts'
}
});
You can also just change the way Laravel Mix generates the folder structure by overwriting the Webpack rule that manages fonts.
The original rule can be found in the Laravel Mix package, in src/builder/webpack-rules.js, line 50, where the comment says // Add support for loading fonts.
In your Mix file you can overwrite the rule with the webpackConfig method, like this:
mix.webpackConfig({
module: {
rules: [{
test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
loaders: [{
loader: 'file-loader',
options: {
name: (path) => {
if (!/node_modules|bower_components/.test(path)) {
return 'fonts/[name].[ext]?[hash]';
}
return (
'fonts/vendor/' +
path
.replace(/\\/g, '/')
.replace(
/((.*(node_modules|bower_components))|fonts|font|assets)\//g,
''
) +
'?[hash]'
);
},
},
}],
}],
},
})
The rule I have written is almost identical to the one in the Laravel Mix package, so if you need to change it you will have to update one of the two returns: in this case the second one, because the fonts come from an npm module.
So instead of
path
.replace(/\\/g, '/')
.replace(
/((.*(node_modules|bower_components))|fonts|font|assets)\//g,
''
)
you can write an hard-coded string or change what you want out of the original path: in this way the folder structure in the original node module (in this case Font Awesome) won't affect the folder structure of your public folder.