我正在使用webpack-4,gulp-sass,node-sass和express。当我尝试建立网站时,出现错误。似乎无法找到我的项目本地的node_modules目录。我在做什么错了?
如果我从“ @import” functions“;”更改import语句;到“ @import” / node_modules / bootstrap / scss / functions“;错误消失了。
\\ webpack.config.js
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, './src/app.js'),
mode: 'none',
output: {
filename: 'main.min.js',
path: path.resolve(
__dirname,
'./src/js/'
),
},
}
\\ gulp-config.js
module.exports = {
projectURL: 'localhost:3000',
browserAutoOpen: false,
injectChanges: true,
sass: {
src: './src/sass/main.scss',
dest: './src/public/css/',
watchDirectory: './src/sass/**/*.scss',
},
js: {
src: './src/js/**/*.js',
dest: './src/js/',
watchDirectory: './src/js/**/*.js',
ignoredFiles: './src/js/main.min.js',
},
}
\\ Excerpt from main.scss
@import "functions";
@import "variables";
\\ gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync');
const plumber = require('gulp-plumber');
const webpack = require('webpack');
const webpackstream = require('webpack-stream');
const webpackconfig = require('./webpack.config.js');
sass.compiler = require('node-sass');
const config = require('./gulp-config.js');
// Browsersync
const browsersync = (done) => {
browserSync.init({
proxy: config.projectURL,
open: config.browserAutoOpen,
injectChanges: config.injectChanges,
watchEvents: [ 'change', 'add', 'unlink', 'addDir', 'unlinkDir' ]
});
done();
};
// Helper function to allow browser reload with Gulp 4.
const reloadBrowsers = (done) => {
browserSync.reload();
done();
};
// Minifiers
gulp.task('sass', () =>
gulp
.src(config.sass.src)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(config.sass.dest))
);
gulp.task('js', () =>
gulp
.src([ config.js.src ])
.pipe(plumber())
.pipe(webpackstream(webpackconfig, webpack))
.pipe(gulp.dest(config.js.dest))
);
// Watcher
gulp.task('watch', () => {
gulp.watch(config.sass.watchDirectory, { usePolling: true }, gulp.series('sass', reloadBrowsers));
gulp.watch(
config.js.watchDirectory,
{
usePolling: true,
ignored: config.js.ignoredFiles
},
gulp.series('js', reloadBrowsers)
);
});
// Default
gulp.task('default', gulp.parallel('sass', 'js', browsersync, 'watch'));