繁体   English   中英

如何通过scss文件编辑css

[英]How to edit css through scss files

实际上,对于最近的一个项目,我下载了一个主题(管理面板)。 它主要包含.scss文件形式的部分css 我尝试直接从style.css编辑文件,但似乎没有任何改变。 所以我做了一点研究,发现scss文件需要再次编译。 我不知道如何编译.scss文件。 在他们的 github 页面上,我发现可以在以下命令的帮助下进行更改

gulp serve

我不知道上面的命令是将 scss 再次编译为 css,但它不起作用所以,请帮忙解决这个问题,或者只是提供一个指向教程的链接,我可以从那里学习这个

这是我刚刚下载的项目的链接https://github.com/BootstrapDash/PurpleAdmin-Free-Admin-Template

提前致谢

为一个你自己不使用 SCSS 的项目设置一个 SCSS 编译器是很乏味的。 相反,尝试快速编译它并在编译后编辑 CSS 文件。

您可以在线使用免费的编译器,例如https://www.cssportal.com/scss-to-css/

如果您想使用 SCSS 启动一个项目,并在其中编译它,您确实可以使用 Bootstrap 提供的 GULP 设置。

https://mdbootstrap.com/bootstrap-gulp-tutorial/

你也可以自己轻松设置 Gulp:

https://codehangar.io/gulp-sass/

上面的 URL 对以下内容进行了更广泛的解释:

npm install gulp-sass --save-dev

结构:

-index.html
--assets
---styles
----sass
-----index.scss
----css

“风格”任务

//gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
    cssDest = 'assets/styles/css/';

gulp.task('styles', function(){
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

守望者

gulp.task('watch',function() {
    gulp.watch(sassFiles,['styles']);
});

吞咽手表

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM