エディターをvscodeに切り替えて、sassで作業したいのですがうまくcssが作成されていないので確認お願い致します。
ターミナルにgulp sass:watchの命令をしてエラーは出ていないのですが、うまくコンパイルがされないです。
ディレクトリ構造は下記になります。distフォルダにコンパイルされたファイルが格納されるようにしたいです。
project
├dist/
│ ├css/
│ └js/
└src/
├js/
└scss/
gulpfile.js //パス設定 var paths = { 'html' : './dist/', 'scss' : './src/scss/', 'css' : './dist/css/', 'jsSrc' : './src/js/', 'jsDist' : './dist/js/' } var gulp = require('gulp'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob'); var sourcemaps = require('gulp-sourcemaps'); var autoprefixer = require('autoprefixer'); var mqpacker = require('css-mqpacker'); var plumber = require('gulp-plumber'); var notify = require('gulp-notify'); var postcss = require('gulp-postcss'); sass.compiler = require('node-sass'); gulp.task('sass', function () { return gulp.src(paths.scss + '.**/*.scss') .pipe(plumber({propertyIsEnumerable: notify.onError("Error: <%= error.message %>")})) .pipe(sourcemaps.init()) .pipe(sassGlob()) .pipe(sass().on('error', sass.logError)) .pipe(sass({outputStyle: 'expanded'})) .pipe(postcss([mqpacker()])) .pipe(postcss([autoprefixer({ browsers: ['last 2 versions']})])) .pipe(sourcemaps.write()) .pipe(gulp.dest(paths.css)); }); gulp.task('sass:watch', function () { gulp.watch(paths.scss + '.**/*.scss', gulp.series('sass')); // 変更 });
package.json { "name": "test_project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^9.4.7", "css-mqpacker": "^7.0.0", "gulp": "^4.0.0", "gulp-notify": "^3.2.0", "gulp-plumber": "^1.2.1", "gulp-postcss": "^8.0.0", "gulp-sass": "^4.0.2", "gulp-sass-glob": "^1.0.9", "gulp-sourcemaps": "^2.6.4" } }
scss .sample{ display: flex; transform: scale(2); border:{ top: 5px solid #ccc; bottom:{ width: 3px; style:dotted; color:#FFF; } } } .box{ display: flex; justify-content: space-between; background:linear-gradient(to bottom, white, black); transition: all .7s; }
D:\web-date\project> gulp sass:watch [00:45:39] Using gulpfile D:\web-date\project\gulpfile.js [00:45:39] Starting 'sass:watch'...
以上になります。
情報が足りませんでしたら、補足致しますのでご連絡お願い致します。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。