Question

我最近在名为importer的node-sass中发现了这个功能，它允许您处理sass文件中@import的任何遭遇。

我想利用此功能轻松地从npm包导入.css文件，类似于Browserify。

这是我的sass文件。（index.scss）

@import "normalize.css";

当我通过Sass和我的导入器运行此文件时，它应该输出这个（假设index.css）：

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
  ...

相反，它输出这个（实际的index.css）：

@import url(/Users/me/workspace/project/node_modules/normalize.css/normalize.css);

是什么给出的？为什么我的导入程序只更改文件路径而不是taking the file and combining it with the original file？

这是我运行sass的导入器和gulp任务（gulpfile.babel.js）：

import gulp from 'gulp';
import sass from 'gulp-sass';
import rename from 'gulp-rename';
import path from 'path';
import fs from 'fs';
let aliases = {};

function importNpmModule(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 {
    const basePath = path.resolve('node_modules', url);
    const pkgInfo = path.join(basePath, 'package.json');
    const info = JSON.parse(fs.readFileSync(pkgInfo));
    const newPath = path.join(basePath, info.style);

    aliases[url] = newPath; // cache this request
    return done({ file: newPath });
  } catch(e) {

    // If module could not be found, return the original url
    aliases[url] = url;
    return done({ file:url });
  }
}

gulp.task('sassify', () => {
  return gulp.src('./index.scss')
    .pipe(sass({ importer: inportNpmModule }))
    .pipe(rename('index.css'))
    .pipe(gulp.dest('public'));
});

编辑：我也尝试使用名为sass-module-importer的npm软件包，但它遇到了与我完全相同的问题。

Answer 1

这不是您的进口商问题。您有这个错误，因为Sass导入中有.css。省略它。

如果您遇到问题，可能应该更新到node-sass的最新版本或使用rename .css to .scss before compiling之类的黑客。

如何让Sass Importer将文件组合成一个样式表？

1 个答案: