Windows10(Pro, 64bit)でタスクランナーにGulp4(^4.0.2)を利用しているときに、scssのコンパイルがうまくいかない("@import/xxxx"を読み込んでくれない)状況になり、解決まで長いこともやもやしていたので備忘録として載せておきます。
環境
| ツール名など | 詳細 |
|---|---|
| OS | Windows10 Pro 64bit |
| エディタ | Sublime Text 3 |
| タスクランナー | Gulp4(^4.0.2) |
| Node.js | v14.4.0 |
| npm | v6.14.5 |
package.json
{//︙略"devDependencies":{//︙略"browser-sync":"^2.26.7","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","node-sass":"^4.14.1","uglifyjs-webpack-plugin":"^2.2.0","webpack":"^4.43.0","webpack-cli":"^3.3.11","webpack-stream":"^5.2.1"},//︙略}ファイルツリー
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
├─ style.css
└─ index.html
gulpfile.js
'use strict';constfs=require('fs');const{task,src,dest,watch,series,parallel}=require('gulp');constautoPreFixer=require('gulp-autoprefixer');constcleanCss=require('gulp-clean-css');constcssComb=require('gulp-csscomb');constejs=require('gulp-ejs');constgulpIf=require('gulp-if');constplumber=require('gulp-plumber');constrename=require('gulp-rename');constreplace=require('gulp-replace');constsass=require('gulp-sass');constsassGlob=require('gulp-sass-glob');constsourceMaps=require('gulp-sourcemaps');// develpment flag; switch 'true' or 'false'. true = development;constdevMode=true;// browserconstbrowser=require('browser-sync').create();// stylesass.compiler=require('node-sass');constscss_src='./sass/**/*.scss';// scssの場所constcss_dest='../dist/';// css出力場所//︙略// サーバー立ち上げconstbrowserSyncOption={port:8080,server:{baseDir:'../dist/',index:'index.html',},reloadOnRestart:true,};constbrowsersync=(done)=>{browser.init(browserSyncOption);done();}constwatchFiles=(done)=>{constbrowserReload=()=>{browser.reload();done();}watch(['ejs/**/*.ejs',]).on('change',series(html,browserReload));watch(['sass/**/*.scss',]).on('change',series(css,browserReload));watch(['js/**/*.js',]).on('change',series(js,browserReload));}// scssをコンパイルするタスクconstcss=()=>src(scss_src).pipe(plumber()).pipe(sassGlob()).pipe(sass.sync({outputStyle:devMode?'expanded':'compressed',}).on('error',sass.logError)).pipe(cssComb()).pipe(autoPreFixer()).pipe(dest(css_dest),{sourcemaps:'./maps'});// ejsをコンパイルするタスクconsthtml=(done)=>{// ︙略done();}// js with webpackconstjs=()=>src('./js/*.js').pipe(plumber()).pipe(webpackStream(webpackConfig,webpack)).pipe(dest(js_dest));// 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);scssファイルの内容
style.scss
@import"mixin/mixin";@import"module/theme_head";@import"reset/ress";@import"config/config";@import"module/head";@import"module/base";_base.scss
.header{width:100%;overflow-x:hidden;position:relative;z-index:101;background-color:#111;color:#fff;}ここで、例えば"background-color: #fff;"などと変更して_base.scssを保存すると下記エラーが発生しました。
発生したエラー
(略)
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";
^
(略)
ちなみにMacだと上記エラーは発生しません。
解決方法
下記が答えでした。
https://github.com/dlmanning/gulp-sass/issues/235#issuecomment-99998298
WindowsのSublime Text 3 だと"atmoic_save"を"ture"にする必要があるとのこと。
過去このオプションは致命的なバグがあったそうですが、現時点(2020.6.14)で自分が調べた限りでは
このオプションに関連する致命的なバグは無さそうな模様でした。
なので、Preferences.sublime-settings--Userに下記を追記しました。
{//︙略"atomic_save":true,//︙略}結果、ライブリロードもコンパイルも無事に成功。
無事にimportしてくれるようになりました。
まとめ
WindowsのSublime Text 3 では"atmoic_save"を"ture"にすることでNode-sassのコンパイルエラーを回避できます。
ただし"atmoic_save"についてどのような処理がなされているのかがよく判っていないため、引き続き調べていきます。