Question

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

我希望你能帮助我。

感谢您的时间

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

事实上，你已经为susy做过那件事，而不是断点。您也无法导入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。这取决于你。

sass import node_modules脚本

1 个答案: