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!
Related
I'm currently trying to use Webpack to bundle all my files and I don't know how to proceed when dealing with multiple folders and .scss files.
I used to use grunt to do these tasks, and this is an example of my folder structure:
functions
- _mixin.scss
- _function.scss
- [...]
variables
- _colors.scss
- _typo.scss
- [...]
ui
- _button.scss
- _grid.scss
- [...]
view
- _home.scss
- _about.scss
- [...]
With Grunt I would run a task to generate a file called main.scss containing all the #import, for example:
#import 'function/_mixin.scss';
#import 'function/_function.scss';
#import 'variables/_colors.scss';
#import 'variables/_typo.scss';
[...]
Currently I'm specifying an import inside my .js file (used in conjunction with extract-text-webpack-plugin) to define the main.scss file, but each new import, or old one, needs to be added/removed manually. Is there a way to automate this task with WebPack?
When webpack 3 or 4
Use node-sass-glob-importer
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require('node-sass-glob-importer');
...
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
sassOptions: {
importer: globImporter()
}
}
}
]
Use this way.
// Import all files inside the `scss` directory and subdirectories.
#import 'scss/**/*.scss';
#import 'scss/component-*';
Note - only works with webpack 2 (requires update for webpack 3^)
You could use the plugin import-glob-loader github / npm
It supports globbing with
#import "foo/**/*";
which outputs to
#import "foo/1.scss";
#import "foo/bar/2.scss";
#import "foo/bar/3.scss";
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.
I put together this gulp task using the docs to compile down my application Sass, but it doesn't seem to build any of the Foundation 6 Sass files except for the initial comment in foundation.scss.
// gulp task
'use strict';
var path = require('path');
var gulp = require('gulp');
var sass = require('gulp-sass');
var config = require('./../config.js');
var helpers = require('./../helpers.js');
gulp.task('sass', ['clean-styles'], function () {
helpers.log('Compile Sass');
var source = path.join(
config.assetsPath, // <-- 'assets/js'
config.css.sass.folder, // <-- 'sass'
'**/*.scss'
);
var outputFolder = path.join(
config.publicPath, // <-- 'public'
config.css.outputFolder // <-- 'css'
);
return gulp.src(source)
.pipe(
sass(config.css.sass.pluginOptions)
.on('error', sass.logError)
)
.pipe(gulp.dest(outputFolder));
});
Which going by the terminal appears to compile the sass found in app.scss with no errors thrown:
Terminal Output
$ gulp sass
[00:08:41] Using gulpfile D:\projects\app\gulpfile.js
[00:08:41] Starting 'clean-styles'...
[00:08:41] Clean Styles
[00:08:41] D:\projects\app\public\css\app.css
D:\projects\app\public\css\app.css.map
[00:08:41] Finished 'clean-styles' after 23 ms
[00:08:41] Starting 'sass'...
[00:08:41] Compile Sass
[00:08:41] Finished 'sass' after 215 ms
Sass Source Files
// app.scss
// --------------------------------------------------------------------------
// Core Foundation Imports
// --------------------------------------------------------------------------
#import "../../../public/vendors/foundation-sites/scss/foundation";
.help {
color: red;
}
But inside the file the only thing that appears is the comment from the top of the foundation.scss and the sourcemap tag:
Compiled CSS
// app.css
/**
* Foundation for Sites by ZURB
* Version 6.2.1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
.help {
color: red;
}
/*# sourceMappingURL=app.css.map */
Doesn't add in any of the imports located in the file. Just the comment at the top.
Foundation.scss File Imports
/**
* Foundation for Sites by ZURB
* Version 6.2.1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
// Sass utilities
#import 'util/util';
// Global variables and styles
#import 'global';
// Components
#import 'grid/grid';
#import 'typography/typography';
#import 'forms/forms';
#import 'components/visibility';
#import 'components/float';
#import 'components/button';
#import 'components/button-group';
#import 'components/accordion-menu';
#import 'components/accordion';
#import 'components/badge';
// ...
Anyone know why this is happening? I can add my own selectors and they show up, but none of Foundation 6 is compiled. I've got the latest gulp-sass and node-sass via npm.
You have to include all the files you need to compiled to CSS like this.
#include foundation-global-styles;
#include foundation-flex-grid;
#include foundation-typography;
#include foundation-button;
#include foundation-forms;
#include foundation-accordion;
#include foundation-accordion-menu;
#include foundation-badge;
#include foundation-breadcrumbs;
#include foundation-button-group;
#include foundation-callout;
#include foundation-close-button;
....
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.
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.