NodeJS 通过npm导入Sass

jdg4fx2g  于 2022-12-18  发布在  Node.js
关注(0)|答案(7)|浏览(118)

目前,在我们的Sass文件中,我们有如下内容:

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

这很糟糕,因为我们实际上并不确定路径:它可能是../node_modules,也可能是../../../../../node_modules,因为NPM安装东西的方式。
在Sass中有没有一种方法可以一直搜索到node_modules,或者甚至有没有一种通过npm包含Sass的适当方法?

piah890a

piah890a1#

如果你正在寻找一个方便的答案在2017年,并正在使用Webpack,这是最简单的我发现。
假设您的模块路径如下所示:

node_modules/some-module/sass/app

然后,在主scss文件中,可以用途:

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

波浪号操作员应将任何导入解析为模块。

gr8qqesn

gr8qqesn2#

正如Oncle Tom提到的,新版Sass有这个新的importer选项,在这里,你对Sass文件所做的每一个“导入”都将首先通过这个方法,这意味着你可以修改这个方法的实际url。
我已经使用require.resolve来定位实际的模块入口文件。
看看我的 Gulp 任务,看看它是否对你有帮助:

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

现在假设您使用node安装了inuit-normalize,您可以简单地在Sass文件中“要求”它:

@import "inuit-normalize";

我希望这对你和其他人有帮助。因为添加相对路径总是一件麻烦事:)

a0zr77ik

a0zr77ik3#

可以将另一个includePaths添加到渲染选项。

简单示例

片段基于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());
});

应该可以了。您可以使用@import "my-cool-package/super-grid包含包中的文件

Webpack和scss加载程序示例

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

注意最后一个参数,includePaths必须是数组。记住使用正确的格式

xdyibdwo

xdyibdwo4#

你可以使用一个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

Sass文件:

@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才能从平面依赖树中受益。

mspsb9vt

mspsb9vt5#

我专门为此制作了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";

我通常使用gulp-sass(它与常规SASS具有相同的“导入器”选项)

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


然后,在.pipe(sass())中,将导入器作为一个选项添加:

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

r6hnlfcb6#

对于dart-sass和2022的命令行用户,只需使用--load-path选项:

$ npx sass --load-path=node_modules

**重要提示:**整个node_modules文件夹包含太多内容,只需将其设置为在监视模式下启动非常慢。您只需设置包路径,例如:

$npx sass -w --load-path=node_modules/foo --load-path=node_modules/bar/scss
kkbh8khc

kkbh8khc7#

从Sass的官方文档来看,在导入中添加~应该可以完成这项工作。
然而,由于某种原因,它对我不起作用,sass编译器仍然抱怨找不到模块。
因此,我尝试了另一种方法,对我来说没有任何问题。下面是解决方案:

  • 如果直接从CLI编译sass文件,请尝试以下操作:
sass src/main.scss dist/main.css --load-path=node_modules
  • 如果您使用npm和/或webpack来编译sass文件,请将类似下面的内容添加到package.jsonscripts中:
"scripts": {
    ...
    "build": "sass src/main.scss dist/main.css --load-path=node_modules",
    ...
  }

然后运行:

npm run build

  • 最后,像这样导入模块:
@import "some-module/sass/app";

总结一下,添加--load-path=node_modules标志永久解决了这个问题。有关详细信息,请查看:

sass --help

相关问题