为什么gulp不从node_modules中提取css？
为什么gulp不从node_modules中提取css？
提问于 2019-05-16 22:58:53
我正在尝试将一个gulp 3x文件移动到4x，但是遇到了一个问题，为什么当从我的.scss文件执行@import时，gulp没有得到文件的内容。相反，它输出的是@import....
下面是我的css方法：
function css() {
return gulp
.src('./src/scss/**/*.scss')
.pipe(sourcemaps ? sourcemaps.init({loadMaps: true}) : noop())
.pipe(plumber())
.pipe(sass({
includePaths: ['./src/scss/', 'node_modules'],
outputStyle: 'expanded'
}))
.pipe(gulp.dest('./public/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(postcss([autoprefixer(), cssnano({
discardComments: {
removeAll: true
},
discardDuplicates: true,
discardEmpty: true,
minifyFontValues: true,
minifySelectors: true
})]))
.pipe(sourcemaps ? sourcemaps.write('./') : noop())
.pipe(size({gzip: true, showFiles: true}))
.pipe(gulp.dest('./public/css/'))
.pipe(browsersync.stream());}
这是我的.scss文件：
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400|Roboto:400,500');
@import "~pickadate/lib/compressed/themes/default.css";
@import "~pickadate/lib/compressed/themes/default.date.css";
@import "variables";
@import "calendar";
body {
font-family: 'Nunito', sans-serif;
}
...以下是通过吞咽获得的输出：
@import url("https://fonts.googleapis.com/css?family=Nunito:300,400|Roboto:400,500");
@import url(~pickadate/lib/compressed/themes/default.css);
@import url(~pickadate/lib/compressed/themes/default.date.css);
.calendar {
color: red;
}
body {
font-family: 'Nunito', sans-serif;
}在我的GUCP3X文件中，它将把所有的.scss (和任何导入的文件)编译成一个.css文件。取而代之的是，我得到了导入的字符串。
我对我做错了什么感到困惑。感谢您的任何建议！
回答 1
Stack Overflow用户
发布于 2019-05-16 23:48:20
这是我为遇到这个问题的任何人想出的办法。最后，我手动将所需的css文件复制到build目录中。
从那里我更新了我的gulpfile.js文件，如下所示：
/**
* Compile scss into css.
*
* @returns {*}
*/
function scss() {
return gulp
.src('./src/scss/**/*.scss')
.pipe(sourcemaps ? sourcemaps.init({loadMaps: true}) : noop())
.pipe(plumber())
.pipe(sass({
includePaths: ['./src/scss/', 'node_modules'],
outputStyle: 'expanded'
}))
.pipe(gulp.dest('./public/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps ? sourcemaps.write('./') : noop())
.pipe(size({gzip: true, showFiles: true}))
.pipe(gulp.dest('./build/css/'))
// .pipe(gulp.dest('./public/css/'))
.pipe(browsersync.stream());
}
/**
* Combine & minify all css files.
*
* @returns {*}
*/
function css() {
return gulp.src([
"./node_modules/normalize.css/normalize.css",
"./build/css/*.css",
"./src/css/**/*.css"
])
.pipe(plumber())
.pipe(sourcemaps ? sourcemaps.init({loadMaps: true}) : noop())
.pipe(concat('widget.bundle.min.css'))
.pipe(postcss([autoprefixer(), cssnano({
discardComments: {
removeAll: true
},
discardDuplicates: true,
discardEmpty: true,
minifyFontValues: true,
minifySelectors: true
})]))
.pipe(sourcemaps ? sourcemaps.write('./') : noop())
.pipe(size({gzip: true, showFiles: true}))
.pipe(gulp.dest('./public/css/'));
}
...
const watch = gulp.parallel(watcher);
const styles = gulp.series(scss, css);
exports.watch = watch;
exports.styles = styles;希望这能有所帮助。我仍然想弄清楚如何避免手动复制.css文件，但这是一个很好的开始。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56171463
复制相关文章
相似问题
腾讯云开发者
