node.js - yet - node-sass rebuild

Importación de Sass a través de npm

Question

Actualmente en nuestros archivos Sass tenemos algo como lo siguiente:

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

Esto es malo, porque no estamos realmente seguros de la ruta: podría ser ../node_modules , podría ser ../../../../../node_modules , debido a cómo npm instala cosas.

¿Hay alguna manera en Sass de que podamos buscar hasta encontrar node_modules? ¿O incluso una forma adecuada de incluir Sass a través de npm?

Answer 1

Como mencionó Oncle Tom, la nueva versión de Sass tiene esta nueva opción de importer , donde cada "importación" que hagas en tu archivo Sass irá primero a través de este método. Eso significa que puede modificar la URL real de este método.

He utilizado require.resolve para localizar el archivo de entrada del módulo real.
Echa un vistazo a mi tarea de trago y mira si te ayuda:

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

Ahora digamos que instaló inuit-normalize usando node. Simplemente puede "requerirlo" en su archivo Sass:

@import "inuit-normalize";

Espero que eso te ayude a ti y a los demás. Porque agregar caminos relativos siempre es un dolor en el culo :)

Answer 2

Hice el módulo sass-npm específicamente para esto.

npm install sass-npm

En tu 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";

Normalmente uso gulp-sass (que tiene la misma opción de ''importador'' que SASS regular)

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

Luego, en su .pipe(sass()) , agregue el importador como una opción:

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

Answer 3

Puede agregar otros includePaths a sus opciones de renderizado.

Ejemplo simple

Fragmento basado en el ejemplo de 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());
});

Eso debería hacer. Puede incluir los archivos del paquete usando @import "my-cool-package/super-grid

Ejemplo de Webpack y scss-loader

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

Observe que el último argumento, includePaths tiene que ser una matriz. Tenga en cuenta que debe usar el formato correcto

Answer 4

Puede usar una función de importer Sass para hacerlo. Cf. https://github.com/sass/node-sass#importer--v200 .

El siguiente ejemplo ilustra [email protected] con [email protected]:

Instale la dependencia del bower:

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

El archivo Sass:

@import ''sass-mq/mq'';

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

El archivo de renderizador de nodos:

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

Este es simple y no recursivo. La función require.resolve podría ayudar a manejar el árbol, o esperar hasta [email protected] para beneficiarse del árbol de dependencia plana.

Answer 5

Si está buscando una respuesta útil en 2017 y está usando Webpack, esta fue la más fácil que encontré.

Supongamos que su ruta de módulo es como:

node_modules/some-module/sass/app

Luego, en su archivo scss principal puede usar:

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

El operador de Tilde resolverá cualquier importación como un módulo.