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

Ответ 1

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

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

Установите зависимость байеров:

$ 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;
  }
}

Файл визуализации node:

'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] не получит пользы от плоского дерева зависимостей.

Ответ 2

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

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

node_modules/some-module/sass/app

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

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

Оператор Tilde должен разрешить любой импорт в качестве модуля.

Ответ 3

Как сказал он, Тока, новая версия Sass имеет этот новый параметр importer, где каждый "импорт", который вы делаете на своем Sass файл будет идти первым через этот метод. Это означает, что вы можете затем изменить фактический URL этого метода.

Я использовал require.resolve, чтобы найти фактический файл ввода модуля.
Посмотрите мою задачу gulp и посмотрите, поможет ли она вам:

'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'));
});

Теперь скажем, что вы установили inuit-normalize, используя node. Вы можете просто "потребовать" его в файле Sass:

@import "inuit-normalize";

Я надеюсь, что это поможет вам и другим. Поскольку добавление относительных путей всегда является болью в заднице:)

Ответ 4

Вы можете добавить еще 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());
});

Ответ 5

Я сделал специально для этого 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,
}))