Импорт Sass через НПМ

Question

В настоящее время в наших файлах Sass мы имеем что-то вроде следующего:

@import "../../node_modules/some-module/sass/app"; 

Это плохо, потому что мы на самом деле не уверены в пути: он может быть ../node_modules, это может быть ../../../../../node_modules , из-за того, как npm устанавливает материал.

Есть ли способ в Сасс, который мы можем найти, пока не найдем node_modules? Или даже правильный способ включить Sass через npm?

Answer 1

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

Следующий пример иллюстрирует node-sass@3.0.0 с node@0.12.2:

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

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

Сасс файла:

@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 может помочь справиться с деревом - или дождаться npm@3.0.0, чтобы извлечь выгоду из плоского дерева зависимостей.

Answer 2

Как сказал он, Том new version of Sass has this new importer option, где каждый «импорт», который вы делаете в вашем файле Sass, будет первым путем этого метода. Это означает, что вы можете изменить фактический URL этого метода.

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

'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 с помощью узла. Вы можете просто «потребовать» его в файле Sass:

@import "inuit-normalize"; 

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

Answer 3

Вы можете добавить еще один способ оплаты: includePaths.

Plain пример

сниппета на основе, например, из Oncle Тома.

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 и СКС-Loader пример

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

Обратите внимание на последний аргумент, INCLUDEPATHs должен быть массивом. Имейте в виду использовать right format

Answer 4

Я специально разработал модуль 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"; 

Я обычно использую Глоток-дерзость (который имеет один и тот же вариант 'импортер' в качестве регулярного SASS)

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

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

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

Answer 5

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

Пусть ваш путь модуль подобен:

node_modules/some-module/sass/app 

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

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

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