質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

2回答

992閲覧

Gulp 4 を利用、watch で SCSSの変更を監視、browser-syncでリロードすると「ファイルがインポートできない」と出る

suzunari0017

総合スコア7

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2020/05/25 13:03

編集2020/05/26 06:47

OS: Windows10(64bit)、 Node.js v14.3.0、npm v6.14.5の環境で、Gulp v4.0.2を利用したコーディングをしています。
browser-syncを利用してコード(.scss)の変化を監視、オートリロードですぐに確認したい…のですが、下記のような
エラーが出てしまい、scssがコンパイルされません。

#####git-bashの内容

(略) Error in plugin "sass" Message: sass\style.scss Error: File to import not found or unreadable: ./module/base. on line 11 of sass/style.scss >> @import "./module/base"; ^ (略)

###実現したいこと
上記エラーを解消し、ライブリロードで仮想環境上の反映されたスタイルをすぐ確認できるようにしたいです。

browser-syncを使用しない場合は何事もなくコンパイルできるのですが、監視してライブリロードをするとなると
必ずこうなってしまいます。Node-sassが関連しているという記事を参考にしたり、海外のサイトも参考に
試してみるもうまく行かず…

一体何が原因なのかさっぱりわからず途方に暮れています。
package.json, gulpfile.js, style.scssの内容は以下の通りです。

#####package.json(あれこれ試した結果、余計なものも入ってます)

{ "name": "flowchart_test", "version": "1.0.0", "description": "for test flowchart.js", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "gulp", "export": "NODE_ENV=production gulp export", "webpd": "webpack --mode development", "webpro": "webpack --display-used-exports --mode production", "webdev": "webpack --display-used-exports --mode development" }, "author": "szq0011", "license": "ISC", "devDependencies": { "@babel/cli": "^7.8.4", "@babel/core": "^7.9.6", "@babel/preset-env": "^7.9.6", "@types/jquery": "^3.3.38", "@types/node": "^14.0.1", "autoprefixer": "^9.8.0", "babel-loader": "^8.1.0", "browser-sync": "^2.26.7", "css-loader": "^3.5.3", "ejs-lint": "^1.1.0", "fancy-log": "^1.3.3", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-clean-css": "^4.3.0", "gulp-compass": "^2.1.0", "gulp-csscomb": "^3.1.0", "gulp-ejs": "^5.1.0", "gulp-if": "^3.0.0", "gulp-load-plugins": "^2.0.3", "gulp-plumber": "^1.2.1", "gulp-rename": "^2.0.0", "gulp-replace": "^1.0.0", "gulp-sass": "^4.1.0", "gulp-sass-glob": "^1.1.0", "gulp-sourcemaps": "^2.6.5", "imports-loader": "^0.8.0", "mini-css-extract-plugin": "^0.9.0", "node-sass": "^4.14.1", "postcss-loader": "^3.0.0", "sass-loader": "^8.0.2", "style-loader": "^1.2.1", "ts-loader": "^7.0.4", "typescript": "^3.9.2", "uglifyjs-webpack-plugin": "^2.2.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.11", "webpack-stream": "^5.2.1" }, "dependencies": { "@babel/polyfill": "^7.8.7", "core-js": "^3.6.5", "jquery": "^3.5.1", "raphael": "^2.3.0", "swiper": "^5.4.0" } }

#####gulpfile.js

'use strict'; const fs = require('fs'); const {task, src, dest, watch, series, parallel} = require('gulp'); const autoPreFixer = require('gulp-autoprefixer'); const cleanCss = require('gulp-clean-css'); const cssComb = require('gulp-csscomb'); const ejs = require('gulp-ejs'); const gulpIf = require('gulp-if'); const plumber = require('gulp-plumber'); const rename = require('gulp-rename'); const replace = require('gulp-replace'); const sass = require('gulp-sass'); const sassGlob = require('gulp-sass-glob'); const sourceMaps = require('gulp-sourcemaps'); // develpment flag; switch 'true' or 'false'. true = development; const devMode = true; // browser const browser = require('browser-sync'); // style sass.compiler = require('node-sass'); const scss_src = './sass/**/*.scss'; // scssの場所 const css_dest = '../dist/css/'; // css出力場所 // js with webpack const webpack = require('webpack'); const webpackStream = require('webpack-stream'); let webpackConfig = require('./webpack.config'); const webpackMode = devMode? 'development' : 'production'; webpackConfig.mode = webpackMode; const js_dest = '../dist/js/'; // サーバー立ち上げ const browserSyncOption = { port: 8080, server: { baseDir: '../dist/', index: 'index.html', }, reloadOnRestart: true, }; function browsersync(done) { browser.init(browserSyncOption); done(); } function watchFiles(done) { const browserReload = () => { browser.reload(); done(); }; watch(['ejs/**/*',]).on('change', series(html, browserReload)); watch(['sass/**/*.scss',]).on('change', series(css, browserReload)); watch(['js/**/*',]).on('change', series(js, browserReload)); } // scssをコンパイルするタスク function css() { return src(scss_src) .pipe(plumber()) .pipe(gulpIf(devMode, sourceMaps.init())) .pipe(sassGlob()) .pipe(sass({ outputStyle: devMode? 'expanded' : 'compressed', outFile: '../dist/css/', }).on('error', sass.logError)) .pipe(gulpIf(devMode, sourceMaps.write())) .pipe(cssComb()) .pipe(autoPreFixer()) .pipe(gulpIf(!devMode, cleanCss())) // 圧縮 .pipe(dest(css_dest)) .pipe(browser.reload({stream: true})); }; // ejsをコンパイルするタスク function html(done) { const jsonFile = "./ejs/pages.json"; const jsonFile2 = "./ejs/contents.json"; const ejsSrc = "./ejs/*.ejs"; const json = JSON.parse(fs.readFileSync(jsonFile)); // JSON読み込み const json2 = JSON.parse(fs.readFileSync(jsonFile2)); const pages = json.pages; const contents = json2.contents; const result = []; for (var i = 0; i < pages.length; i++) { var id = pages[i].id; result.push(src(ejsSrc) .pipe(plumber()) .pipe(ejs({ jsonData: pages[i], // JSONのデータをejsに渡す contents: contents, // JSONのデータをejsに渡す devMode: devMode, })) .pipe(rename(id + '.html')) // (id).htmlにファイル名変更 .pipe(dest("../dist/")) .pipe(browser.reload({stream: true})) ); } done(); }; // js with webpack function js() { return src('./js/*.js') .pipe(plumber()) .pipe(webpackStream(webpackConfig, webpack)) .pipe(dest(js_dest)) .pipe(browser.reload({stream: true})); }; // default に設定タスクを登録 task('default', series(parallel(html, css, js), series(browsersync, watchFiles))); exports.html = html; exports.css = css; exports.js = js; exports.compile = series(html, css, js);

#####style.scss

@import "./mixin/mixin"; @import "./module/theme_head"; @import "./reset/ress"; @import "./config/config"; @import "./module/head"; @import "./module/base"; @import "./module/pc";
ファイル構成
dev ─┬─ webpack.config.js ├─ gulpfile.js ├─ package.json ├─ package-lock.js ├─ tsconfig.json ├─ webpack.config.js ├─ ejs ─── (略) ├─ js ─── (略) ├─ ts ─── (略) ├─ node_modules └─ sass ─┬─ style.scss ├─ config ─── _config.scss ├─ mixin ─── _mixin.scss ├─ module ─┬─ _base.scss │ ├─ _guide.scss │ ├─ _head.scss │ ├─ _lt.scss │ ├─ _pc.scss │ ├─ _sp.scss │ ├─ _tb.scss │ └─ _theme.head.scss ├─ reset ─┬─ _normalize.scss │ └─ _ress.scss └─ vender ─┬─ _swiper.min.scss └─ _swiper.scss dist ─┬─ js ├─ css └─ index.html

お知恵をお貸しいただけると幸いです。
何卒よろしくおねがいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

Error: File to import not found or unreadable: ./module/base
on line 11 of sass/style.scss

「./module/base.」なんて見つからないのでインポートできないよ、
というエラーのようですが。
正しい場所に存在していますか?

質問文にファイルツリーを追加記載されてはいかがでしょう。

投稿2020/05/25 14:13

technocore

総合スコア7200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

suzunari0017

2020/05/25 21:40

大変失礼しました。ファイルツリーを追記させていただきました。
guest

0

自己解決

解決、ではないのですが、一応ライブリロードもどきの動作ができたので報告します。
順序としては、
1: 修正・書き起こしたいスタイルを該当の.scssファイル(今回は_base.scssに書くことを想定します)に書き、保存
2: エラーで怒られる

bash

1Error in plugin "sass" 2Message: 3 sass\style.scss 4Error: File to import not found or unreadable: module/base. 5 on line 11 of sass/style.scss 6>> @import "module/base"; 7 8 ^

3: 'style.scss'を保存する
4: ブラウザがリロードされ、スタイルが適用される

という流れでした。
はっきり言って正しいやり方ではないのはわかりきっているので、今後も調査は続けますが、
一旦はこれで進めることにします。
妥協案です。

※node-sassでエラーが起きているような感じなのでそこをもっと深掘っていこうと思います…

###追記(2020.05.26)
node-sassのGithubを見たところ、

Compiling on Windows machines requires the node-gyp prerequisites.

直訳すると「Windowsマシンでコンパイルするには、node-gypの前提条件が必要です」とのこと。
しかしリンク先の手順を踏んでnode-gypを入れてみても相変わらずエラー…

####Macで試してみた
Macでは何もエラーが発生せずライブリロードに成功。
OSによってnode-sassの動作(コンパイル)が変わるところまでは理解できました。

###追記(2020.06.14)
当方はコーディングでSublime Text 3を使っているのですが、下記の様なissueが取り上げられていました。
https://github.com/dlmanning/gulp-sass/issues/235#issuecomment-99998298

結論として、Windows環境において Sublime Text 3でコーディングする時は、ユーザー設定で

// Preference.sublime-settings--User // 略 "atomic_save": true, // 略

を書き加えることで解決しました。

ちなみに"atomic_save"オプションとは、「別のファイルに書き込んで保存し、元のファイルの名前を変更します。(直訳)」とのことですが、Sublime Textの挙動がどのように変わったのかは判らず…
おそらく一度別ファイルに書き出してそれを元のファイル名で上書きしているのかな?と考えていますが…
こちらもどのような挙動をしているのか引き続き調べていきます。

一旦解決はしたので以上報告とします。

投稿2020/05/26 12:31

編集2020/06/14 00:01
suzunari0017

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問