我发现Web Essentials autoprefixer不够自动 - 我需要手动说出它来添加前缀。当我写.less
或.scss
时,它也不会为我提供前缀。
是否有任何扩展或选项可以让它自动在.less
或.scss
阶段的css编译中添加前缀?
我已尝试使用Web编译器扩展,但它不支持为sass添加前缀,并表示它支持少量前缀,但我在编写时尝试在compilerconfig.json中启用autoprefix { {1}}并且它没有添加任何内容。
视觉工作室有什么东西吗?或者也许我应该抛弃它并使用一些编辑器+ gulp?
答案 0 :(得分:3)
我确信会有一个扩展,但创建一个Grunt / Gulp文件来为你编译并不是太多工作。然后,Task Runner Explorer将管理文件的运行。编写自己的内容将为您提供扩展所不具备的控制权和灵活性。
以下是使用Grunt的示例,摘自主题Getting started with Grunt, SASS and Task Runner Explorer
上的帖子module.exports = function (grunt) {
'use strict';
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
options: {
sourceMap: true, // Create source map
outputStyle: 'compressed' // Minify output
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "sass", // The startup directory
src: ["**/*.scss"], // Source files
dest: "stylesheets", // Destination
ext: ".css" // File extension
}
]
}
},
// Autoprefixer
autoprefixer: {
options: {
browsers: ['last 2 versions'],
map: true // Update source map (creates one if it can't find an existing map)
},
// Prefix all files
multiple_files: {
src: 'stylesheets/**/*.css'
},
},
// Watch
watch: {
css: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'autoprefixer'],
options: {
spawn: false
}
}
}
});
grunt.registerTask('dev', ['watch']);
grunt.registerTask('prod', ['sass', 'autoprefixer']);
};