sass import node_modulesスクリプト

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 

のように見え、これは私の一気ファイルです：

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

ため

おかげであなたは自分の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')); 
}); 

実際には、あなたは既にサクシーのためにブレークポイント・サスを使用していませんでした。あなたはどちらかbreakpoint-sassをインポートすることはできません、それがなければならないだけでbreakpoint：

あなたが node_modules/breakpoint-sass/stylesheets/_breakpoint.scssというファイルをインポートするためです

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

。あなたの輸入品は、存在しない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を組み込み、次にimportしてください。 susy/sass/susyおよびbreakpoint-sass/stylesheets/breakpoint。それはあなた次第です。