TailwindCSSが存在しないCSSを参照してしまう
解決したいこと
TailwindCSSが存在しないCSSを参照してしまうエラーが起きていて、これを解消したいです。
環境
- gulp 4.0.2
- tailwindcss 3.2.7
発生している問題・エラー
なぜか設置した覚えのないscssフォルダのstyle.cssを参照してエラーになっている状態です。。。
ENOENT: no such file or directory, stat '【プロジェクトのパス】/dev/assets/scss/style.css'
実際には dev/assets/css/style.min.cssを参照しています。
gulpのcss部分
const gulp = require('gulp');
// const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const plumber = require('gulp-plumber');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const gutil = require('gulp-util');
const notifier = require('node-notifier');
const postcss = require("gulp-postcss");
const mqpacker = require('css-mqpacker');
const autoprefixer = require('autoprefixer');
// tailwindcss
const tailwindcss = require('tailwindcss');
const tailwindConfig = require("../../tailwind.config");
const CONFIG = require('../config.js');
// Compile Sass & Autoprefixer & Minify CSS
const styles = () => {
return gulp.src([
CONFIG.paths.dev.scss + '/**/*.scss'
])
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
notifier.notify({
message: 'Error: ' + error.message,
title: error.plugin,
sound: 'Glass'
});
}))
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(postcss([
tailwindcss(tailwindConfig),
autoprefixer({
cascade: false,
grid: 'autoplace'
}),
mqpacker()
]))
.pipe(gulp.dest( CONFIG.paths.dev.css ))
.pipe(rename({ suffix: '.min' }))
.pipe(cssnano())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest( CONFIG.paths.dev.css ))
}
exports.styles = styles;
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./dev/**/*.{pug,html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
style.scss
@import '../../../node_modules/tailwindcss/base';
@import '../../../node_modules/tailwindcss/components';
@import '../../../node_modules/tailwindcss/utilities';
ディレクトリ構造
自分で試したこと
- エラーログのパス通りにダミーで以下にcssを設置するとエラーは消えましたが、根治はしていない状態です。
'【プロジェクトのパス】/dev/assets/scss/style.css'
有識者の皆様どうかご教授の程よろしくお願い致します。。。
0