sass 导入 node_modules 脚本答案

【问题标题】：sass import node_modules scriptsass 导入 node_modules 脚本
【发布时间】：2023-03-07 18:13:02
【问题描述】：

我是 gulp、susy、sass 的新手，我一直在寻找解决以下问题的方法，但没有成功。

@import 'susy';
@import 'breakpoint-sass';

没用，但是

@import "../node_modules/modularscale-sass/stylesheets/_modular-scale.scss";
@import "../node_modules/breakpoint-sass/stylesheets/_breakpoint.scss";

有效。但这不是正确的方法，不是吗？我也试过了，sudo npm install breakpoint-sass --save-dev 但还是不行。

我的项目看起来像

.
├── assets
│   ├── atoms
│   │   └── _test.scss
│   └── style.scss
├── dist
│   └── style.css
├── gulpfile.js
└── package.json

这是我的 gulp 文件：

const gulp = require('gulp'),
      browserSync = require('browser-sync'),
      reload = browserSync.reload,
      autoprefixer = require('autoprefixer'),
      sass = require('gulp-sass')
      imagemin = require('gulp-imagemin'),
      uglify = require('gulp-uglify'),
      plumber = require('gulp-plumber');



gulp.task('sass', function() {
  return gulp.src('./assets/*.scss')
      .pipe(sass({
          outputStyle: 'compressed',
          includePaths: ['node_modules/susy/sass']
      }).on('error', sass.logError))
      .pipe(gulp.dest('./dist'));
});

这是我的 package.json：

{
  "private": true,
  "engines": {
    "node": ">=4"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "breakpoint-sass": "^2.7.0",
    "browser-sync": "^2.2.1",
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.0.1",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.1.1",
    "gulp-uglify": "^1.1.0",
    "modularscale-sass": "^2.1.1",
    "susy": "^2.2.12"
  }
}

希望你能帮帮我。

感谢您的宝贵时间

【问题讨论】：

标签： npm sass gulp

【解决方案1】：

您只需在sass 任务中添加includePaths 参数的路径即可。

gulp.task('sass', function() {
  return gulp.src('./assets/*.scss')
      .pipe(sass({
          outputStyle: 'compressed',
          includePaths: [
            'node_modules/susy/sass',
            'node_modules/breakpoint-sass/stylesheets'
          ]
      }).on('error', sass.logError))
      .pipe(gulp.dest('./dist'));
});

事实上你已经为 susy 拥有了，只是没有 breakpoint-sass。也不能导入breakpoint-sass，只能是breakpoint：

@import 'susy';
@import 'breakpoint';

那是因为您要导入名为node_modules/breakpoint-sass/stylesheets/_breakpoint.scss 的文件。您的导入会尝试查找不存在的 node_modules/breakpoint-sass/stylesheets/_breakpoint-sass.scss。

作为参考，安装和使用 SASS 库的步骤如下：

使用 npm 安装库。
在node_modules/ 中查找库。展开它，找到你想要@import 的文件。在这种情况下，它是_breakpoint.scss。
将步骤 3 中文件所在目录的路径添加到 includePaths。
将导入添加到您自己的 SASS 源中。

或者，如果需要，您也可以在代码中保留完整的 @import。或者只包含 node_modules 然后导入例如susy/sass/susy 和 breakpoint-sass/stylesheets/breakpoint。这完全取决于你。

【讨论】：