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.
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'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))
I'm new to Sass, so sorry if this is basic.
I'm compiling my main sass file using gulp, which works fine. However, I'm having trouble bringing in partials - I'm doing it wrong, but I can't figure out how.
style.scss
#import partial
$main-color: rgb(117, 0, 0);
h1 {
color: $main-color;
}
h2 {
color: $secondary-color;
}
_partial.scss
$secondary-color: rgb(175, 87, 205);
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('default', function() {
return gulp.src('style.scss')
.pipe(sass(
{outputStyle: 'compressed'})
.on('error', sass.logError)
)
.pipe(gulp.dest('css'))
})
Do I need to add something to the gulp task to make it compile both the base scss file and the partial?
Line 1 of your style.scss should be #import 'partial';
Sass requires the quotes and the semicolon (for the semicolon you may have been tripped up by the fact that .sass Sass wouldn't use that semicolon)
sass gives an error message
Error: File to import not found or unreadable: helpers/mixins.scss
Parent style sheet: .../temp/styles/all.scss
on line 1 of temp/styles/all.scss
>> #import 'helpers/mixins.scss';
^
at this point, the code looks like
#import 'helpers/mixins.scss';
#import 'helpers/variables.scss';
#import 'helpers/fonts.scss';
#import '../../node_modules/bootstrap/scss/bootstrap';
#import '../../node_modules/fotorama/fotorama.css';
.navbar {
#extend navbar-light;
#extend bg-faded;
}
gulp task looks like this
var blocks = 'app/blocks/**/*.scss';
gulp.task('styles', () => (
gulp.src(['app/styles/app.scss', blocks])
.pipe(concat('all.scss'))
.pipe(sass({
errLogToConsole: true,
indentedSyntax: false
}))
.pipe(gulp.dest('temp/styles'))
));
How to solve this problem?
how to make galp correctly understand the way?
In your gulp file you can declare sass paths, eg.
var sassPaths = [
'node_modules/bootstrap/scss',
'node_modules/fotorama'
];
These are relative to your gulp file.
Then set include paths inside your list of sass arguments
.pipe(sass({
errLogToConsole: true,
indentedSyntax: false,
includePaths: sassPaths
}))
Then in your sass make sure your imports are either relaitve to the parent sass file or relative to one of the include paths.
I'm trying to use sass with grunt and I'm having a weird behavior.
If I create any file with underscore it doesn't work anymore, and it doesn't import either.
That is my Gruntfile, really simple:
module.exports = function(grunt) {
'use strict';
require('load-grunt-tasks')(grunt);
grunt.initConfig({
watch: {
sass: {
files: 'scss/**/*.{scss,sass}',
tasks: ['sass']
}
},
sass: {
example: {
options: {
outputStyle: 'expanded'
},
files: {
'public/css/app.css': 'scss/**/*.{scss,sass}'
}
}
}
});
grunt.registerTask('default', ['watch']);
};
If I create a file, for example, application.scss in scss/, it works and creates the file app.css in public/css, but if I create any file with underscore, for instance: _variables in scss/ it doesn't work anymore, it doesn't create the file or changes anything and it doesn't import either.
application.scss:
#import "variables";
body {
background-color: $bg-color;
}
_variables.scss:
$bg-color: red;
Files with names starting with an underscore are considered as partial in the eyes of SASS. This means that SASS would not make an actual css file out of them. To prevent this, either create an index.scss file and import your partials in it or remove the underscore from their names.
Official DOcs
I solved it by using:
files: [{
expand: true,
cwd: 'scss',
src: '**/*.{scss,sass}',
dest: 'public/css',
ext: '.css'
}]