CODEWITHSUNDEEP
node.jssassgulpjspm
Chris Nevill
Chris Nevill

Reputation: 6152

Usage of node-sass-jspm-importer paths configuration

I'm trying to get my head around this sass importer: https://github.com/idcware/node-sass-jspm-importer

I'm not entirely certain I'm trying to use it correctly.

I'm trying to use the example of using it to import font-awesome. The GitHub page provides the following example

gulp.task('build-sass', function() {
    return gulp.src('src/sass/*.scss')
        .pipe(sass({
            errLogToConsole: true,
            functions: sassJspm.resolve_function('/lib/'),
            importer: sassJspm.importer
        }))
        .pipe(gulp.dest('dist/css'));
});

In this example I'm uncertain how much of a bearing this section has:

gulp.src('src/sass/*.scss')

How does this path make any sense when the SASS/SCSS files are to be imported from JSPM Packages which would have paths like:

jspm_packages/npm/[email protected]/scss

The lib folder in this section

functions: sassJspm.resolve_function('/lib/'),

Should that be /jspm_packages/ since in the documentation it specifies

Where /lib/ is the path to your jspm_packages folder in your document root.

In which case why did they not just specify jspm_packages?

Upvotes: 1

Views: 112

Answers (1)

Chris Nevill
Chris Nevill

Reputation: 6152

I was thinking about this all wrong. One of the things I was missing was that with SASS/SCSS you can use import directives. As such rather than import many generated css files it makes more sense to have the SASS compiler/importer produce one single CSS File.

So I created a single SCSS file that was outside of my JSPM_Packages folder in src called SCSS.

In this SCSS file I could then place the following code

$fa-font-path: jspm_resolve("font-awesome/fonts/"); 
@import "jspm:font-awesome/scss/font-awesome";

The line in the gulp file:

gulp.src('src/scss/*.scss')

Can then find this single SCSS File and from there work out how to import all the SCSS Files for Font-Awesome through the JSPM_Package folder structure. A single main CSS file was then placed in the destination directory which contained the css from font-awesome.

Which in my case where I'm using ASP.NET Core looks like this:

.pipe(gulp.dest('./wwwroot/css'));

The functions line needed to be set to jspm_packages

functions: sassJspm.resolve_function('/jspm_packages/'),

I'm not sure why they have it as lib in their documentation - maybe this was an old JSPM configuration?

Upvotes: 1

Related Questions