Импорт Sass через npm

Если вы ищете удобный ответ в 2017 году и используете Webpack, это было самое простое, что я нашел.

Предположим, ваш путь к модулю выглядит так:

node_modules/some-module/sass/app

Затем в вашем основном файле scss вы можете использовать:

@import "~some-module/sass/app";

Оператор тильды должен разрешать любой импорт как модуль.

Как упоминал Oncle Tom, новая версия Sass имеет эту новую importer опцию< /a>, где каждый «импорт», который вы делаете в своем файле Sass, будет сначала проходить через этот метод. Это означает, что вы можете изменить фактический URL-адрес этого метода.

'use strict';

var path       = require('path'),
    gulp       = require('gulp'),
    sass       = require('gulp-sass');

var aliases = {};

/**
 * Will look for .scss|sass files inside the node_modules folder
 */
function npmModule(url, file, done) {
  // check if the path was already found and cached
  if(aliases[url]) {
    return done({ file:aliases[url] });
  }

  // look for modules installed through npm
  try {
    var newPath = path.relative('./css', require.resolve(url));
    aliases[url] = newPath; // cache this request
    return done({ file:newPath });
  } catch(e) {
    // if your module could not be found, just return the original url
    aliases[url] = url;
    return done({ file:url });
  }
}

gulp.task("style", function() {
  return gulp.src('./css/app.scss')
    .pipe(sass({ importer:npmModule }))
    .pipe(gulp.dest('./css'));
});

@import "inuit-normalize";

Вы можете добавить еще один includePaths в параметры рендеринга.

Простой пример

Фрагмент на основе примера из Oncle Tom.

var options = {
  file: './sample.scss',
  includePaths: [
    path.join(__dirname, 'bower_components'), // bower
    path.join(__dirname, 'node_modules') // npm
  ]
};

sass.render(options, function(err, result){
  console.log(result.css.toString());
});

Это должно сработать. Вы можете включить файлы из пакета, используя @import "my-cool-package/super-grid

Пример Webpack и scss-loader

{
  test: /\.scss$/, 
  loader: 'style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules' 
},

Обратите внимание на последний аргумент, includePaths должен быть массивом. Не забывайте использовать правильный формат.

Для этого вы можете использовать функцию Sass importer. См. https://github.com/sass/node-sass#importer--v200.

Следующий пример иллюстрирует [email protected] с [email protected]:

Установите зависимость Bower:

$ bower install sass-mq
$ npm install sass/node-sass#3.0.0-pre

Файл Sass:

@import 'sass-mq/mq';

body {
  @include mq($from: mobile) {
    color: red;
  }
  @include mq($until: tablet) {
    color: blue;
  }
}

Файл рендерера узла:

'use strict';

var sass = require('node-sass');
var path = require('path');
var fs = require('fs');

var options = {
  file: './sample.scss',
  importer: function bowerModule(url, file, done){
    var bowerComponent = url.split(path.sep)[0];

    if (bowerComponent !== url) {
      fs.access(path.join(__dirname, 'bower_components', bowerComponent), fs.R_OK, function(err){
        if (err) {
          return done({ file: url });
        }

        var newUrl = path.join(__dirname, 'bower_components', url);

        done({ file: newUrl });
      })
    }
    else {
      done({ file: url });
    }
  }
};

sass.render(options, function(err, result){
  if (err) {
    console.error(err);
    return;
  }

  console.log(result.css.toString());
});

Это просто и не рекурсивно. Функция require.resolve может помочь справиться с деревом — или подождать, пока [email protected] не воспользуется преимуществами плоского дерева зависимостей.

Специально для этого я создал модуль sass-npm.

npm install sass-npm

В вашем SASS:

// Since node_modules/npm-module-name/style.scss exists, this will be imported.
@import "npm-module-name";

// Since just-a-sass-file isn't an installed npm module, it will be imported as a regular SCSS file.
@import "just-a-sass-file";

Обычно я использую gulp-sass (который имеет ту же опцию «импортер», что и обычный SASS)

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sassNpm = require('sass-npm')();

Затем в своем .pipe(sass()) добавьте импортер в качестве опции:

.pipe(sass({
    paths: ['public/scss'],
    importer: sassNpm.importer,
}))