Editing CSS and SASS - Error: File to import not found or unreadable: susy

I am attempting to edit the CSS for the default theme in Omeka-S. I am familiar with the SASS build process having used Compass in the past. I have installed Gulp and also have GIT installed. When I attempt to compile the CSS files I get the following error message

sudo gulp css
[17:04:10] Using gulpfile /var/www/html/omeka-s/themes/default/gulpfile.js
[17:04:10] Starting ‘css’…
Error in plugin ‘sass’
Message:
asset/sass/style.scss
Error: File to import not found or unreadable: susy
Parent style sheet: /var/www/html/omeka-s/themes/default/asset/sass/style.scss
on line 2 of asset/sass/style.scss

@import “susy”;

Does anyone know what this error message is trying to tell me? Do I need to install SUSY?

thanks in advance

You do need to install susy to build the Sass. You should be able to just do npm install to install all the needed dependencies to build from the source.

1 Like

Hi jflatnes,

Thanks for the clarification. I’ve run npm install already, but it does not sound as though it has completed correctly. Now I know what to expect I will dig a bit deeper.

best wishes

Hi Alex,

You need the full path to susy to get it to work! In the style.scss for the theme. It will be installed in the node_modules folder.

@import "normalize";
@import "/Applications/MAMP/htdocs/omeka-s/themes/default/node_modules/susy/sass/susy";
@import "base";

@media screen {
    @import "screen";
}

@media screen and (min-width:800px) {
    @import "desktop";
}

Cheers,

Andre

I’m not sure if there’s a wrinkle on Macs… if so it’s one I’m unaware of, but if you’ve done npm install the SASS we provide should work fine without requiring an edit for an absolute path.

One thing I didn’t notice before was that you’re running gulp with sudo, that shouldn’t be necessary (though I’m not sure it’s the root of your problem).

Hi John,

I made another discovery that

@import "../../node_modules/susy/sass/susy";

works perfectly.

I get the same error as Alex when I don’t include the path…

@import "susy";

sass --watch sass:css

from the assets folder. Here is the error

error sass/style.scss (Line 3: File to import not found or unreadable: susy.
Load path: /Applications/MAMP/htdocs/omeka-s/themes/ASU/asset/sass)

Andre

What happens if you run gulp css instead? Running sass directly isn’t the intended method for our setup.

John,

When I run gulp css, I get this

➜  ASU gulp css
[04:31:21] Using gulpfile /Applications/MAMP/htdocs/omeka-s/themes/ASU/gulpfile.js
[04:31:21] Starting 'css'...
Error in plugin 'sass'
Message:
    asset/sass/style.scss
Error: File to import not found or unreadable: susy
       Parent style sheet: /Applications/MAMP/htdocs/omeka-s/themes/ASU/asset/sass/style.scss
        on line 2 of asset/sass/style.scss
>> @import "susy";
   ^

[04:31:22] Finished 'css' after 481 ms
➜  ASU

When I added back path i works

@import "../../node_modules/susy/sass/susy";

Thanks

Hmmm… can you post what your gulpfile.js looks like?

'use strict';

var gulp = require('gulp');

gulp.task('css', function () {
    var sass = require('gulp-sass');
    var postcss = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');

    return gulp.src('./asset/sass/*.scss')
        .pipe(sass({
            outputStyle: 'compressed',
            includePaths: ['../../node_modules/susy/sass']
        }).on('error', sass.logError))
        .pipe(postcss([
            autoprefixer({browsers: ['> 5%', '> 5% in US', 'last 2 versions']})
        ]))
        .pipe(gulp.dest('./asset/css'));
});

gulp.task('css:watch', function () {
    gulp.watch('./asset/sass/*.scss', gulp.parallel('css'));
});

I think I see the problem here… the includePaths line is supposed to fix this for you automatically, but it looks like it’s slightly wrong.

If you take the ../../ out of the path on the includePaths line (so the string just starts with node_modules) does that help (when running gulp css or gulp css:watch)?

1 Like

John,

So, removing the …/… fixed this. Thanks for the new Omeka-s v1.3.0. It has resolved so many problems with hack thumbnail and universal viewer behaving properly. Still on this topic of import. The new default theme works perfectly with gulp, npm install susy and even bootstrap. I added includePaths: [‘node_modules/bootstrap/scss’] but still can’t access any bootstrap css or js in the new theme. Please advise!

'use strict';

var gulp = require('gulp');

gulp.task('css', function () {
    var sass = require('gulp-sass');
    var postcss = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');

    return gulp.src('./asset/sass/*.scss')
        .pipe(sass({
            outputStyle: 'compressed',
            includePaths: ['node_modules/susy/sass'],
	    includePaths: ['node_modules/bootstrap/scss']
        }).on('error', sass.logError))
        .pipe(postcss([
            autoprefixer()
        ]))
        .pipe(gulp.dest('./asset/css'));
});

gulp.task('css:watch', function () {
    gulp.watch('./asset/sass/*.scss', gulp.parallel('css'));
});

My current fix is to add to layout.phtml but I wish I could be pointing local to reduce external call.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<?php
$escape = $this->plugin('escapeHtml');
$this->htmlElement('html')->setAttribute('lang', $this->lang());
$this->headMeta()->setCharset('utf-8');
$this->headMeta()->appendName('viewport', 'width=device-width, initial-scale=1');
$this->headTitle($this->setting('installation_title', 'Omeka S'))->setSeparator(' · ');
$this->headLink()->prependStylesheet($this->assetUrl('css/style.css'));
$this->headLink()->prependStylesheet($this->assetUrl('css/iconfonts.css', 'Omeka'));
$this->headLink()->prependStylesheet('//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700italic,700');
$this->headScript()->prependFile($this->assetUrl('js/default.js'));
$this->headScript()->prependFile($this->assetUrl('js/global.js', 'Omeka'));
$this->headScript()->prependFile($this->assetUrl('vendor/jquery/jquery.min.js', 'Omeka'));
$this->trigger('view.layout');
$title = $this->pageTitle($site->title());
$userBar = $this->userBar();
$logo = $this->themeSettingAssetUrl('logo');
if ($logo):
    $title = '<img src="' . $this->escapeHtml($logo) . '">';
endif;
?>
<?php echo $this->doctype(); ?>
<?php echo $this->htmlElement('html'); ?>
    <head>
        <?php echo $this->headMeta(); ?>
        <?php echo $this->headTitle(); ?>
        <?php echo $this->headLink(); ?>
        <?php echo $this->headStyle(); ?>
        <?php echo $this->headScript(); ?>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

includePaths is an array, so you’d put multiple entries within one includePaths rather than duplicating it:

includePaths: ['node_modules/susy/sass', 'node_modules/bootstrap/scss']
1 Like

John,

I made the change and I thought it was working! I don’t get any compile errors anymore with gulp css and I can see that bootstrap grid is working. However some bootstrap javascript isn’t working. The carousel css is present but the functionality of the carousel is not work like clicking or acting like a slideshow. Do I need to include js too?

Here is my style.scss

@import "normalize";
//@import "../../node_modules/bootstrap/scss/bootstrap";
//@import "../../node_modules/susy/sass/susy";
@import "base";
@import "susy";
@import "bootstrap";

@media screen {
    @import "screen";
}

@media screen and (min-width:800px) {
    @import "desktop";
}

Thanks!

The susy/css/sass stuff only handles CSS. If you’re dealing with stuff that needs Javascript you have to handle that separately.

This thread has drifted a little bit from its initial topic so I’m going to close it, but feel free to open a new thread if you still have issues.