有没有办法测试 PostCSS Autoprefixer 是否正常工作?专用于 Rails 6 [英] Is there a way to test if PostCSS Autoprefixer is working? Specifically for Rails 6

问题描述

我正在使用 Webpacker 编写 Rails 6 web 应用程序.我的理解是 Rails 6 中的自动前缀通过 PostCSS 和它的 autoprefixer 插件开箱即用.

I am writing a Rails 6 webapp using Webpacker. Its my understanding that auto-prefixing in Rails 6 works out of the box via PostCSS and its autoprefixer plugin.

但是我无法验证这个库是否实际上是我的 css 的前缀.

However I cannot verify if this library is in fact prefixing my css or not.

有没有办法确认标准的默认 Rails 6.0.0 应用程序是否开箱即用自动前缀?

Is there a way to confirm if a standard default Rails 6.0.0 app auto-prefixes out of the box?

我已经运行 yarn autoprefixer --info 来查看它适用的 css 规则和浏览器，以及它适用于我的浏览器 chrome 77 的 def.我尝试使用它列出的适用参数.然而，它仍然没有在开发或生产中显示任何带前缀的 css.

I have run yarn autoprefixer --info to see the css rules and browsers it applies to and its def applying to my browser chrome 77. And I tried using a parameter that it lists as applying to. It still however dosn't show any prefixed css in dev or production.

我不确定 postcss-preset-env 是如何工作的，所以我不确定 css 是否只在使用需要前缀的浏览器时才被添加前缀.

Im not sure how postcss-preset-env works so i'm not sure if the css only gets prefixed when using a browser that needs the prefix.

我来自使用 autoprefixer-rails gem，它挂在链轮上，只是给所有东西加上前缀.

Im coming from using autoprefixer-rails gem that hooks into sprockets and just prefixes everything.

这是我的 .postcss.config.js 文件...

Here is my .postcss.config.js file...

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

推荐答案

您可以通过运行来测试您编译的 CSS(包括 PostCSS 的输出)在生产环境中的样子

You can test what your compiled CSS (including PostCSS's output) would look like in production by running

$ RAILS_ENV=production bundle exec rails webpacker:compile

这篇关于有没有办法测试 PostCSS Autoprefixer 是否正常工作?专用于 Rails 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！