I'm using a gulp-sass plugin and it gives errors like
"Error: no mixin named font-base"
"Error: Undefined variable: "$background-color"
Apart from that I get a long list of errors which annoys me… and it does not let me find an error which breaks compilation if it happens. Renamed mixins.scss to _mixins.scss but it does not help.
My mixins.scss
#mixin font-base ($size, $height) {
font-size: $size;
line-height: $height;
font-weight: 500;
color: $lavender;
font-family: $base-font-family;
}
My style.scss
#import "global/fonts";
#import "variables";
#import "mixins";
#import "global/scafolding";
Sorry - find a mistake in gulp's task, it was:
gulp.task("style", function() {
gulp.src("source/sass/**/*.scss")
.pipe(plumber())
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("source/css"))
.pipe(browserSync.stream());
});
then I changed gulp.src from "source/sass/**/*.scss" to "source/sass/style.scss" and now everything is fine))
Related
I am using nuxt-vite in a SSR nuxt project, here is my code
nuxt.config.js
module.exports = {
css: [
'~/assets/fonts.scss',
]
}
I want to use #mdi/font in my project, and here is where it located in node_modules:
First, I try to import the css directly:
#import '#mdi/font/css/materialdesignicons.css
But the browser can not find the fonts files
Then, I try to load the raw scss variables just like what I did when using webpack whick works without any issues.
#import "#mdi/font/scss/variables";
#import "#mdi/font/scss/functions";
#font-face {
font-family: '#{$mdi-font-name}';
src: url('#mdi/font/fonts/#{$mdi-filename}-webfont.eot?v=#{$mdi-version}');
src: url('#mdi/font/fonts/#{$mdi-filename}-webfont.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
url('#mdi/font/fonts/#{$mdi-filename}-webfont.woff2?v=#{$mdi-version}') format('woff2'),
url('#mdi/font/fonts/#{$mdi-filename}-webfont.woff?v=#{$mdi-version}') format('woff'),
url('#mdi/font/fonts/#{$mdi-filename}-webfont.ttf?v=#{$mdi-version}') format('truetype');
font-weight: normal;
font-style: normal;
}
#import "#mdi/font/scss/core";
#import "#mdi/font/scss/icons";
#import "#mdi/font/scss/extras";
#import "#mdi/font/scss/animated";
But the vite can not load the scss variables correctly:
How can I use the fonts in node_modules when using vite?
I googled it and read the doc but helped little.
Greate thanks to anyone help!
add this to nuxt.config.js
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "~/assets/styles/Variables.scss";\n#import "~/assets/styles/Mixins.scss";\n`
}
}
}
},
I have the following code...
#use "#material/top-app-bar/_variables.import" as mdc;
.color{
background-color: lightblue;
height: mdc.$row-height;
}
But when I run I get...
Error: Expected digit.
src/components/header/index.style.scss 4:17 root stylesheet
I am guessing I am importing the Sass file incorrectly. I have tried...
#use "#material/top-app-bar/variables";
.color{
background-color: lightblue;
height: variables.$row-height;
}
#use "#material/top-app-bar/mdc-top-app-bar";
.color{
background-color: lightblue;
height: $mdc-top-app-bar-row-height;
}
Etc... but nothing I try is working. How do I import the variable using sass?
Update
I noticed this further up
[!] (plugin postcss) Error: Expected digit.
src/components/header/index.style.scss 9:29 root stylesheet
Could this be a Rollup plugin issue?
Update 2
Looks like part of the problem was installing the node-sass package. Now I get...
[!] (plugin postcss) Error: Invalid CSS after "...ight: variables": expected expression (e.g. 1px, bold), was ".$row-height;"
When I run the following...
#use "#material/top-app-bar/variables" as variables;
.color{
background-color: lightblue;
height: variables.$row-height;
}
I also tried the simpler
// ./_variables.scss
$row-height: 64px !default;
#use "./variables";
.color{
background-color: lightblue;
height: variables.$row-height;
}
And I still get the same thing.
I had a similar issue using the sass color module.
I had to add the following to my rollup.config.js
import sassPlugin from 'rollup-plugin-sass'
import sass from 'sass'
sassPlugin({
runtime: sass,
// Other properties omitted for brevity.
})
I am getting this unclear error from SCSS: Unexpected character '' (1:4)
Failed to compile
./components/layout/Layout.scss
ModuleParseError: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
while this is my SCSS File Layout.scss:
#import './sass-tools';
#import './normalize';
#import './custom-base';
.page-wrapper {
position: relative;
max-width: $page-max-width;
margin: 0 auto;
&.nobp {
max-width: none;
width: 1224px;
}
}
.page-content {
position: relative;
background-color: $white;
.nobp & {
width: 1024px;
}
}
This is my folder structure:
./components/layout/
∟ Layout.jsx
∟ Layout.scss
∟ Layout.test.js
∟ _fonts.scss
∟ _sass-tools.scss
∟ custom-base.scss
∟ normalize.scss
For me it is unclear what character '' (1:4) is ought to be. I believe my Webpack config is ok, I can post it if you want, but SCSS has worked so far (with other files) in my project.
I found the problem. The SASS compiler output is bullshit: This is what happened:
Layout.scss imports
custom-base.scss imports
fonts.scss
that includes .woff and .woff2 files. I think I still need to add a loader for those
why he does not see the bootstrap class?
If I remove all the #extend works normally
Error: ".navbar" failed to #extend "navbar-light".
The selector "navbar-light" was not found.
Use "#extend navbar-light !optional" if the extend should be able to fail.
on line 11 of app/styles/app.scss
>> #extend navbar-light;
--^
app.scss
does not see #extend bootstrap class, but why? (If I remove all the #extend, bootstrap styles compiling normally)
#import 'bootstrap/scss/bootstrap';
#import 'fotorama/fotorama';
.navbar {
color: red;
#extend navbar-light;
#extend bg-faded;
}
My gulp task
var sassPaths = [
'node_modules'
];
gulp.task('styles', () => (
gulp.src(['app/styles/app.scss'])
.pipe(sass({
includePaths: sassPaths,
errLogToConsole: true,
indentedSyntax: false
}))
.pipe(rename({suffix: '.min', basename: 'app'}))
.pipe(gulp.dest('dist/assets/styles'))
));
I have set up a webapp using Sass with Yeoman's angular fullstack generator. It seemed to be running fine, until I realised errors that were being output every time grunt tries to run a task. Here's the output:
/Users/rorysmith/.rvm/rubies/ruby-2.2.1/bin/scss --no-cache --update app.scss:app.css
error app.scss (Line 4: File to import not found or unreadable: ../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap.)
Process finished with exit code 1
It's referring to a line in the app.scss file:
#import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap'
I changed the directory to include ../ at the start, as this is where my bower_components live:
When commented out, it has an issue with a different line of the same file:
#import 'modal/modal.scss';
Here's the app.scss file in its entirety, it's just the stock one created by the generator:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap";
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap';
#import '../bower_components/font-awesome/fonts';
/**
* App-wide Styles
*/
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// Component styles are injected through grunt
// injector
#import 'account/login/login.scss';
#import 'admin/admin.scss';
#import 'create/create.scss';
#import 'main/main.scss';
#import 'modal/modal.scss';
// endinjector
Any idea what on earth is going on?
I was encountering the same problem, here's what "fixed" it for me...
In the Gruntfile, find the following:
// Inject component scss into app.scss
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '#import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'<%= yeoman.client %>/app/app.scss': [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}',
'!<%= yeoman.client %>/app/app.{scss,sass}'
]
}
},
Modify the following line to read:
filePath = filePath.replace('/client/components/', '../components/');
Now it should inject with the correct paths.
Caveat: I don't really know what I'm doing.