如何使Sass Importer將文件合併到一個樣式表中？

我最近在名爲importer的node-sass中發現了這個特性，它允許你在你的sass文件中處理與@import的任何相遇。如何使Sass Importer將文件合併到一個樣式表中？

我想利用此功能可以輕鬆地從npm包導入.css文件，與Browserify類似。

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

@import "normalize.css";

當我運行通過薩斯和這個文件我的進口商，應該輸出這個（應該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 { 
    ...

相反，這個輸出（實際指數。 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）：

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

編輯：我也嘗試過使用名爲青菜模塊，進口商的NPM包，但它具有完全相同的我有問題。

來源

2015-08-16 banhfun

這不是您的進口商問題。您有此錯誤，因爲Sass導入中有.css。只是省略它。

如果你有問題後，可能應該更新到node-sass的最後一個版本，或使用一些黑客如rename .css to .scss before compiling。

來源

2015-11-04 16:46:34

如何使Sass Importer將文件合併到一個樣式表中？

回答

相關問題