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