如何通过 scss 文件编辑 css

Question

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

gulp serve

我不知道上面的命令是将 scss 再次编译成 css 但是它没有用所以，请帮助解决这个问题，或者只是向教程提供一个 link，我可以从那里学习这个

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

提前致谢

Answer 1

为您自己不使用 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

'styles'任务

//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']);
});

gulp watch

如何通过 scss 文件编辑 css

How to edit css through scss files

css

scss-lint