如何让 Sass Importer 将文件合并到一个样式表中？ [复制]

Posted 2023-03-06

【中文标题】如何让 Sass Importer 将文件合并到一个样式表中？ [复制]

【英文标题】：How do I make the Sass Importer combine files into one stylesheet? [duplicate]

【发布时间】：2015-11-09 09:08:56

【问题描述】：

我最近在名为 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 (gulpfile.babel.js) 的 gulp 任务：

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 包，但它的问题与我完全相同。

【参考方案1】：

这不是您的进口商问题。你有这个错误是因为在 Sass 导入中有.css。直接省略即可。

如果您在那之后遇到问题，您应该更新到最新版本的 node-sass 或使用一些技巧，例如 rename .css to .scss before compiling。