Error: File to import not found or unreadable: でgulp-sass-globしてくれない問題
gulp4系での開発においてトラブったのでメモ。
問題と解決
問題
npx gulp sass
を叩くと
[12:34:23] Failed to load external module @babel/register
[12:34:23] Requiring external module babel-register
[12:34:28] Using gulpfile ~\dir1\dir2\sample\gulpfile.babel.js
[12:34:28] Starting 'sass'...
[12:34:28] Plumber found unhandled error:
Error in plugin "gulp-sass"
Message:
src\sass\style.scss
Error: File to import not found or unreadable: modules/**/*.
on line 3 of src/scss/style.scss
>> @import "hoge", "hogehoge", "hogehogehoge", "modules/**";
^
と怒られます。動かない。
解決方法
gulp-sass-glob
さんに*の存在を認識してもらうには他の読み込むファイル名並列してはいけないようです。
つまり、
@charset "UTF-8";
@import "normalize";
@import "hoge", "hogehoge", "hogehogehoge", "modules/**";
ではなく
@charset "UTF-8";
@import "normalize";
@import "hoge", "hogehoge", "hogehogehoge";
@import "modules/**"
こう!!!
これで解決。めでたしめでたし。
解説
環境
- OS: Windows7
- nodeJS: 8.11.2
- npm: 6.1.0
モジュール
- gulp: 4.0.0
- gulp-sass: 4.0.1
- gulp-sass-glob: 1.0.9
はしょっていますが、階層構造はこんなかんじです。
sample
├─ src/
│ ├─ sass/
│ │ ├─ modules/
│ │ │ └─ *.scss
│ │ └─ *.scss
│ └─ ...
│
├─ temp/
├─ dist/
│
├─ .node_modules/
├─ .babelrc
├─ gulp.babel.js
├─ package-lock.json
└─ package.json
gulpfileはというと、こんなかんじ。
import gulp from 'gulp';
import babel from 'gulp-babel';
import plumber from 'gulp-plumber';
import gulpSass from 'gulp-sass';
import sassGlob from 'gulp-sass-glob';
import autoprefixer from 'gulp-autoprefixer';
const paths = {
styles: {
src: 'src/sass/**/*.scss',
test: 'temp/styles/',
build: 'dist/styles/'
},
scripts: {
src: 'src/js/**/*.js',
test: 'temp/scripts/',
build: 'dist/scripts/'
}
};
function sass() {
return gulp.src(paths.styles.src)
.pipe(plumber())
.pipe(sassGlob())
.pipe(gulpSass({outputStyle: 'compressed'}))
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('./temp/styles/'))
};
exports.sass = sass;
あとは先述のように、style.scss内で@import
で読み込ませるときに並列させないように
気をつければOKでした :D
おまけ
npx gulp
をコマンドプロンプトで叩くと
Failed to load external module @babel/register
と怒られるけど
そのあとにbabel-register
を読み込んでいるので無視しています。
gulpのバージョンを3.9に下げる以外にいい方法を知っている方がいればぜひコメントください。
Author And Source
この問題について(Error: File to import not found or unreadable: でgulp-sass-globしてくれない問題), 我々は、より多くの情報をここで見つけました https://qiita.com/erii/items/957f92620d7cbdba7159著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .