如何解决JetBrains WebStorm中的CSS AutoPrefixer
我正在使用.sass
文件扩展名编写Sass,并使用JB的File Watchers插件。
默认情况下,它不使用自动前缀,而我找不到任何提供此功能的软件包。
如何使用File Watchers或其他方法为WebStorm中的.css
文件获取自动前缀?
解决方法
我不认为IDE内置了任何自动前缀。我使用pycharm(与webstorm差不多)。
https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000149090-Autoprefixer
我使用gulp自动给.sass前缀并编译CSS。
您可以通过添加gulpfile并以以下方式实现此操作来实现此目的:
Variables: ----------------------------------------------------
*/
var autoprefixer = require('gulp-autoprefixer');
然后运行任务:
SCSS / CSS:------------------------------------------- ------
*/
gulp.task('sass',function () {
return gulp.src(STYLES_SRC_FILES)
.pipe(sass().on('error',sass.logError))
.pipe(autoprefixer('last 3 version'))
.pipe(gulp.dest(STYLES_DEST_PATH))
.pipe(cleanCSS({debug: true},function(details) {
console.log('Original Size : ' + details.name + ': ' + details.stats.originalSize + ' bytes');
console.log('Minified Size : ' + details.name + ': ' + details.stats.minifiedSize + ' bytes');
}))
.pipe(renameFiles({ suffix: '.min' }))
.pipe(gulp.dest(STYLES_DEST_PATH));
});
,
是您当前的项目文件夹
您可能必须在全球范围内安装gulp,即
npm install gulp-cli -g
然后将gulpfile添加到您的项目中,然后运行:
gulp
对于Windows npx gulp
我的示例gulpfile如下:
/ *
Variables: ----------------------------------------------------
*/
var gulp = require('gulp'),uglify = require('gulp-uglify'),renameFiles = require('gulp-rename'),sass = require('gulp-sass'),concat = require('gulp-concat'),cleanCSS = require('gulp-clean-css'),gutil = require('gulp-util'),sourcemaps = require('gulp-sourcemaps'),autoprefixer = require('gulp-autoprefixer');
/*
Paths: -------------------------------------------------
*/
var SRC_PATH = './your_project_name/src/',DEST_PATH = './your_project_name/static/',// Style paths
STYLES_SRC_FILES = SRC_PATH + 'scss/**/*.scss',STYLES_DEST_PATH = DEST_PATH + 'css/',// JS paths
JS_SRC_FILES = SRC_PATH + 'js/**/*.js',JS_DEST_PATH = DEST_PATH + 'js/';
/*
SCSS / CSS: -------------------------------------------------
*/
gulp.task('sass',function(details) {
console.log('Original Size : ' + details.name + ': ' + details.stats.originalSize + ' bytes');
console.log('Minified Size : ' + details.name + ': ' + details.stats.minifiedSize + ' bytes');
}))
.pipe(renameFiles({ suffix: '.min' }))
.pipe(gulp.dest(STYLES_DEST_PATH));
});
/*
JS: -------------------------------------------------
*/
gulp.task('js',function () {
return gulp.src(JS_SRC_FILES)
.pipe(concat('main.js'))
.pipe(gulp.dest(JS_DEST_PATH))
.pipe(uglify().on('error',gutil.log))
.pipe(sourcemaps.write('./'))
.pipe(renameFiles({ suffix: '.min' }))
.pipe(gulp.dest(JS_DEST_PATH));
});
/*
Default Task: ----------------------------------------------------- Default Task
*/
gulp.task('watch',function () {
gulp.watch(STYLES_SRC_FILES,gulp.series('sass'));
gulp.watch(JS_SRC_FILES,gulp.series('js'));
});
gulp.task('default',gulp.series('sass','js','watch'));
这将在静态css文件夹中编译自动前缀的css,并使您的scss文件保持整洁
如果使用上面的示例,您将要安装所有gulp任务依赖项,即
npm install gulp-autoprefixer --save
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。