0

我正在尝试将 grunt-postcss 与 autoprefixer 一起使用，但 css 没有得到前缀。Autoprefixer 创建新文件，但不添加前缀。没有错误。

这是我的 gruntfile：

            postcss: {
                options: {
                    map: true,
                    processors: [
                        require('autoprefixer')({
                            browsers: ['last 2 versions']
                        })
                    ]
                },
                files: {
                    '<%= pathBuild %>/<%= pathAssets %>/<%= pathRio %>/css/rio-layout.prefixed.css': '<%= pathBuild %>/<%= pathAssets %>/<%= pathRio %>/css/rio-layout.css',
                    '<%= pathBuild %>/<%= pathAssets %>/<%= pathRio %>/css/theme.prefixed.css': '<%= pathBuild %>/<%= pathAssets %>/<%= pathRio %>/css/theme.css'
                }
            }

怎么了？

4

2 回答 2

0

也许您还没有安装“autoprefixer”，或者它不在预期的文件夹中。

确保您的node_modules/文件夹具有与此类似的文件树：

node_modules/
├── autoprefixer/
│   └── . . .
├── postcss/
│   └── . . .
└── . . .

如果发现autoprefixer/丢失，则需要安装它。

另一种可能性是您安装了 autoprefixer 而没有它的依赖项（例如，该autoprefixer/文件夹不包含它自己的node_modules/文件夹）。通过使用以下命令重新安装它来纠正此问题：

npm install autoprefixer --save-dev

postcss虽然不太可能，但您可能还需要运行上述命令

于 2016-01-21T02:35:09.343 回答
0

在过去的几周里，这让我断断续续地发疯，我刚刚找到了一个适合我的答案。在 Bootstrap Gruntfile.js 中找到它。这就是我认为的问题所在：

对于示例 grunt-postcss 示例，浏览器选项中的“最后 2 个版本”可能是一个占位符。当我从 Bootstrap Gruntfile.js 替换 browsers 数组时，我的 postcss 输出前缀开始匹配 Bootstrap dist css 文件的前缀。这是我使用的完整配置：

grunt.initConfig({
  postcss: {
    options: {
      map: {
          inline: false,
      },

      processors: [
        require('autoprefixer')([
          "Android 2.3",
          "Android >= 4",
          "Chrome >= 20",
          "Firefox >= 24",
          "Explorer >= 8",
          "iOS >= 6",
          "Opera >= 12",
          "Safari >= 6"
        ]),
      ]
    },
    dist: {
      src: 'css/*.css'
    }
  }
});
于 2016-01-25T04:05:29.197 回答