I'm having trouble importing Bourbon into my scss using npm. I've installed both Sass and Bourbon using npm.
my import reads like this:
#import "../../node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets/bourbon";
and this is the my gulp task for scss files:
gulp.task('build-css', function () {
return gulp.src(assetsDev + 'scss/*.scss')
.pipe(sourcemaps.init())
.pipe(postcss([precss, autoprefixer, cssnano]))
.pipe(sourcemaps.write())
.pipe(ext_replace('.css'))
.pipe(gulp.dest(assetsProd + 'css/'));
});
after saving the import path for the first time, this is the error I get:
events.js:141
throw er; // Unhandled 'error' event
^
Error: ENOENT: no such file or directory, open '/Users/yosemetie/Documents/github/udemey-ng2/directives-part1/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets/_bourbon.css'
at Error (native)
One other thing to note is that when I comment out a class like this in my scss file:
//h1{
// color: #4c4c4c;
//}
gulp throws an error -
/app.scss:10:1: Unknown word
// color: #4c4c4c;
//}
however if I write it like this:
h1{
//color: #4c4c4c;
}
No error gets thrown.
Any help would be greatly appreciated!
Thanks in advance - still new to gulp here.
Related
I'am working with sass progmatically, So I want to compile a scss file.
const sourcePath = '******/******/****';
const code = sass.compile(sourcePath).css.toString();
I get this error:
An unhandled exception occurred:
#import '.\common\index';
#import '.\login2\index';
#import '.\login-sms\index';
: no such file or directory
I finnd that there is an option importers compile method:
const code = sass.compile(sourcePath, {
importers: [];
}).css.toString();
But, I don't find what to put in importers!
I'm using gulp to compile my scss files. Everything worked until I got a new laptop, and now the nested variables aren't compiling.
For example, none of these colors compile:
$theme-colors: (
primary: #002d72,
secondary: #53565a,
purple: #4e2984,
light-purple: rgba(78, 41, 132, .8),
light-blue: #69b3e7,
error: #d72f09
);
Example of how a "theme color" would be called:
h3 {
color: theme-color("primary");
}
I had to re-install npm and gulp, so I am obviously using different versions of these two packages then I was previously.
Here are the versions:
npm: 8.5.0
gulp: CLI version: 2.3.0
Local version: 4.0.2
node: v16.14.2
My gulpfile looks like this (it handles scss and js files):
/* file: gulpfile.js */
var gulp = require('gulp');
var sass = require('gulp-sass')(require('node-sass'));
const minify = require('gulp-minify');
var concat = require('gulp-concat');
gulp.task('sass', function(){
return gulp.src('resources/assets/styles/**/*.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('dist/styles'))
.pipe(minify({
ext: '.css',
mangle: false,
noSource: true
}))
});
gulp.task('compress', function() {
return gulp.src('resources/assets/scripts/*.js')
.pipe(concat('main.js'))
.pipe(minify({
ext: '.js',
mangle: false,
noSource: true
}))
.pipe(gulp.dest('dist/scripts'));
});
gulp.task('watch', function() {
gulp.watch('resources/assets/styles/**/*.scss', gulp.series('sass'));
gulp.watch('resources/assets/scripts/**/*.js', gulp.series('compress'));
});
Note: I added require('node-sass') to get gulp to work on the new computer.
If anyone has an idea of what's wrong here, it would be a huge help!
thanks!
Jill
The issue was caused by a discrepancy in the bootstrap node module versions. When the site was first built, it installed bootstrap version 4.3.1. After getting a new laptop and re-installing all the node modules, bootstrap 5.1 was installed.
Not exactly sure why bootstrap would affect scss variables, so if YOU know feel free to enlighten me.
To update the bootstrap version number, navigate to the directory containing the node_modules and run, npm install bootstrap#<version-number> --save
Ok, so I followed procedure on how how to compile sass files to css file in Visual Studio 2019 (asp.net core 2.2), but somehow I am getting the following error
Failed to run "C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
fs.js:119
throw err;
^
Error: ENOENT: no such file or directory, scandir 'C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass\vendor'
at Object.readdirSync (fs.js:806:3)
at Object.getInstalledBinaries (C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass\lib\extensions.js:131:13)
at foundBinariesList (C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass\lib\errors.js:20:15)
at foundBinaries (C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass\lib\errors.js:15:5)
at Object.module.exports.missingBinary (C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass\lib\errors.js:45:5)
at module.exports (C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass\lib\binding.js:15:30)
at Object.<anonymous> (C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:738:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
at Module.load (internal/modules/cjs/loader.js:630:32)
So far I have created package.json file
{
"dependencies": {
"gulp": "3.9.1",
"gulp-sass": "4.0.2"
}
}
and gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('build-css', function () {
return gulp
.src('./SASS/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./CSS'));
});
//Default task
gulp.task('default', ['build-css']);
So according to error message, the following directory doesnt exist C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass\vendor
I am seeing C:\Users\user1\Source\Repos\Admin2Mvc\Admin2Mvc\node_modules\node-sass directory, but not /vendor subdirectory inside.
What am I doing wrong here?
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)
I'm trying to use bulma in my project. But I get an error:
{ Error: resources/assets/sass/app.scss
Error: File to import not found or unreadable: bulma
Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss
on line 1 of resources/assets/sass/app.scss
>> #import "bulma"
^
at options.error (/Users/Janssen/Code/forumv2/node_modules/node-sass/lib/index.js:283:26)
status: 1,
file: '/Users/Janssen/Code/forumv2/resources/assets/sass/app.scss',
line: 1,
column: 1,
message: 'resources/assets/sass/app.scss\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
formatted: 'Error: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
messageFormatted: '\u001b[4mresources/assets/sass/app.scss\u001b[24m\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
messageOriginal: 'File to import not found or unreadable: bulma\nParent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss',
relativePath: 'resources/assets/sass/app.scss',
name: 'Error',
stack: 'Error: resources/assets/sass/app.scss\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n\n at options.error (/Users/Janssen/Code/forumv2/node_modules/node-sass/lib/index.js:283:26)',
showStack: false,
showProperties: true,
plugin: 'gulp-sass' }
MacBook-Pro-van-Jamie:forumv2 Janssen$
This is how my Gulp file looks like:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
mix.webpack('app.js')
.styles([
'./node_modules/normalize-css/normalize.css',
'./node_modules/nprogress/nprogress.css',
'./node_modules/sweetalert/dist/sweetalert.css',
'./node_modules/bulma/css/bulma.css'
])
.sass('app.scss');
});
When I try to import it in my app.scss like this:
#import "bulma"
I receive the above error. What could be wrong?
bulma.scss file needs to be present in the resources/assets/sass directory to import if you are importing from npm package then define the full path like
#import 'node_modules/pathtobulma.scss/bulma';
Try to include them in you main sass file rather in the gulp file . I think that will do the trick.
Try changing const elixir = require('laravel-elixir'); to var elixir = require('laravel-elixir'); This helped me.