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.
Related
I am using tailwind with laravel mix and postcss. I get the error:
#apply cannot be used with .text-grey-default because .text-grey-default either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-grey-default exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree.
I thought that is because is not in the same CSS file but I am using postcss-import to overcome this. The tag body doesn't have any pseudo-selector, and all the imports are at the top of the file. I really can't understand where this problem comes from and how to solve it.
app.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "variables";
#import url("https://fonts.googleapis.com/css?family=Nunito");
#import "#fortawesome/fontawesome-free/css/all.min.css";
body {
#apply text-grey-default;
}
webpack.mix.js
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let atImport = require('postcss-import');
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.options({
processCssUrls: false,
postCss: [
atImport(),
tailwindcss("./tailwind.config.js"),
]
})
.version();
tailwind.config.js
let colors = {
"grey-default": "#636b6f",
};
module.exports = {
colors: colors,
textColors: colors,
options: {
prefix: "",
important: false,
separator: ":"
}
};
I have understood my mistake. I forgot to put colors and text Colors in theme:{} in my tailwind config.
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)
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'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'
}]
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.