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'))
));
Related
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 trying to use #apply in my sass file, and getting the error in the title when I do npm run dev or npm run watch. I'm using Laravel, and using Laravel Mix. Here is my webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
This exists in my app.css
...
.bg-blue {
background-color: #47cdff;
}
My app.scss:
// Tailwind CSS
#tailwind base;
#tailwind components;
#tailwind utilities;
// Custom CSS
.section {
#apply .px-4;
}
.button {
#apply .bg-blue .text-white .no-underline .rounded-lg .text-sm .py-2 .px-5;
box-shadow: 0 2px 7px 0 #b0eaff;
}
Just override the default color pallete, you can do so using the theme.colors section of your tailwind.config.js file :
theme: {
colors: {
white: '#FFFFFF',
blue: '#007ace',
}
}
Then an easy trick never mix regular CSS and imports in the same file. Instead, create one main entry-point file for your imports, and keep all of your actual CSS in separate files.
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 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.