用户投稿若我们要使用外部套件载入的 Sass
那要怎么载入呢??
这里我们以 Bootstrap为例子
先使用 npm 的方式来载入
首先我们先砍掉 bower 载入的 Bootstrap
bower uninstall bootstrap --save再以 npm 方式载入 Bootstrap
npm install bootstrap --save这里可能会出错
但不会影响次次要介绍的内容
明天将介绍如何解决此错误
并把 source 资料夹改名为 stylesheets
当然 watch 与 sass 都必须改动它的 gulp.src来源
gulp.task('sass', function () { // 更改地方 return gulp.src('./source/stylesheets/**/*.scss') .pipe($.plumber()) .pipe($.sourcemaps.init()) .pipe($.sass({ outputStyle: 'nested', }).on('error', $.sass.logError)) .pipe($.postcss([autoprefixer()])) .pipe($.if(option.env === 'production',$.cleanCss())) .pipe($.sourcemaps.write('.')) .pipe(gulp.dest('./public/stylesheet')) .pipe(browserSync.stream())});gulp.task('watch', function () { // 更改地方 gulp.watch('./source/stylesheets/**/*.scss', ['sass']); gulp.watch('./source/**/*.jade', ['jade']); gulp.watch('./source/js/**/*.js', ['babel']);});更改完后 index.jade当然也要更改
<!DOCTYPE html>html(lang="en") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Document // 更改地方 link(rel="stylesheet", href="stylesheet/all.css") script(src="js/all.js") body接下来我们就必须增加 includePaths
gulp.task('sass', function () { return gulp.src('./source/stylesheets/**/*.scss') .pipe($.plumber()) .pipe($.sourcemaps.init()) .pipe($.sass({ outputStyle: 'nested', includePaths: ['./node_modules/bootstrap/scss'] }).on('error', $.sass.logError)) .pipe($.postcss([autoprefixer()])) .pipe($.if(option.env === 'production',$.cleanCss())) .pipe($.sourcemaps.write('.')) .pipe(gulp.dest('./public/stylesheet')) .pipe(browserSync.stream())});接着
我们在all.scss 输入
@import "bootstrap"当然若你想要客製化你的样式
可以尝试另一种方法(可看 twbs 来决定你想要载入的 scss档)
https://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss
那我们就来介绍第二种载入方式啦
在 stylesheets 新增一个 helpers 资料夹
然后我们複製 node_modules/scss/_variables.scss 到 helpers
这一份_variables.scss
你可以自行调整你所想要的样式
那今天的介绍就到这里啦
若有任何问题 或 内容有误
都可以跟我说唷
微信扫一扫打赏
支付宝扫一扫打赏
