sass导入node_modules脚本

Question

我是新来的吞咽，苏西，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

这是我的吞咽文件：

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"
  }
}

希望你能帮我一把。

耽误您时间，实在对不起

Answer 1

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

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

事实上，对于苏西来说，你已经有了，只是没有断点。您也不能导入breakpoint-sass，它必须是breakpoint

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

这是因为您希望导入名为node_modules/breakpoint-sass/stylesheets/_breakpoint.scss的文件。您的导入将尝试查找不存在的node_modules/breakpoint-sass/stylesheets/_breakpoint-sass.scss。

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

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

或者，如果需要，可以将完整的@import保存在代码中。或者仅仅包括node_modules，然后导入，例如susy/sass/susy和breakpoint-sass/stylesheets/breakpoint。这真的取决于你。