CSS JetBrains WebStorm 中的 AutoPrefixer

Question

我正在使用.sass文件扩展名编写 Sass，并使用 JB 的 File Watchers 插件。

默认情况下它不使用自动前缀，我找不到任何提供该功能的 package。

如何使用文件观察器或其他方法在 WebStorm 中为我的.css文件获取自动前缀？

Answer 1

我不相信 IDE 中内置了任何自动前缀。我使用 pycharm（与 webstorm 几乎相同）。

https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000149090-Autoprefixer

我用gulp来autoprefix.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));
  });

Answer 2

是的，您当前的项目文件夹

您可能必须全局安装 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 () {
    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));
  });

/*

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'));

然后这将在 static css 文件夹中编译自动前缀 css 并保持您的 scss 文件整洁

如果使用上面的示例，您将需要安装所有 gulp 任务依赖项，即

npm install gulp-autoprefixer --save

Answer 3

为此使用https://github.com/postcss/postcss-cli

npm i -D -g postcss postcss-cli postcss-nested

添加文件监视器