css - 如何让 grunt-autoprefixer 为未编译的 LESS 文件添加前缀？

Question

我正在使用 LESS，我想在我的 LESS 标记上运行 grunt-autoprefixer 而无需编译 LESS，因为我的 LESS 是在我的 CMS 上自动编译的。

这可能吗？

这是我的 Gruntfile.js

module.exports = function(grunt) {

grunt.initConfig({
  concat: {
    sqs_template: {
      src: ['js/one.js', 'js/two.js'],
      dest: 'sqs_template/scripts/app.js',
    },
  }, 
  autoprefixer: {
        options: {
            remove: true,
        },
      multiple_files: {
      expand: true,
      flatten: true,
      src: 'css/*.less', 
      dest: 'sqs_template/css/',
    },
  },
    watch: {
      js: {
        files: ['js/**/*.js'],
        tasks: ['concat'],
      },
      css: {
        files: ['css/**/*.less'],
        tasks: ['autoprefixer'],
      },
    },
});

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');


};

这是我尝试添加前缀的 LESS 的示例:

//------------------------------------*\

// SOME CSS

//------------------------------------*/

// Variables
@site-width: 960px;
@color: #333333;

// Mixins
.some-font {
    font-family: sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}

.some-container {
    display: flex;
    max-width: @site-width;
    margin: 0 auto;

    .some-container-inner {
        p {
            .some-font;
            color: @color;
        }
    }
}

我希望 grunt-autoprefixer 只做我的 LESS 前缀，然后将其放入 sqs_template 文件夹。现在，grunt-autoprefixer 出错了，因为它似乎无法识别变量或混入。

这可能吗？

谢谢!

Answer 1

您可以使用 mixins 自己为所需的值添加前缀，而不是自动添加前缀。有 LESS-Prefix包含常见嫌疑人的 mixin 的库。

作为一个简单的例子，如果你正在使用 LESS-Prefix(或者你自己有一个类似的 mixin)，你可以只包含 mixin 文件并键入以 为前缀的 CSS-properties .

div {
    .box-shadow(0px 0px 10px rgba(255,0,0,.5));
}

通过这个 mixin 传递值:

.box-shadow(@args) {
    -webkit-box-shadow: @args;
    box-shadow: @args;
}

你会得到这样的结果:

div {
    -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5);
    box-shadow: 0px 0px 10px rgba(255,0,0,.5);
}