ruby-on-rails - (发出值而不是错误实例)bulma css 中的 postcss-custom-properties

Question

概括

我在带有 webpacker 的 rails5 应用程序上使用 Bulma CSS 框架。
我收到如下警告，当我将 css 文件构建为 ./bin/webpack-dev-server 时.有谁知道要消除它们吗？

23:37:47 webpacker.1 | WARNING in ./node_modules/css-loader?{"minimize":false}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/import-glob-loader!./app/javascript/stylesheets/application.scss
23:37:47 webpacker.1 | (Emitted value instead of an instance of Error) postcss-custom-properties: /some_rails_app/app/javascript/stylesheets/application.scss:9284:3: Custom property ignored: not scoped to the top-level :root element (.columns.is-variable { ... --columnGap: ... })

版本

rails :5.1.4

bool 玛:0.6.1

ruby :2.4.1p111

Webpacker:3.0.2

Answer 1

我发现了这个问题 https://github.com/MoOx/postcss-cssnext/issues/186在 github 上，这是我如何设置以摆脱警告。

终端

yarn add postcss-cssnext

在 中为 postcss-loader 添加新选项配置/webpack/loaders/sass.js

{
  loader: 'postcss-loader',
  options: {
    sourceMap: true,
    plugins: (loader) => [
      require('postcss-cssnext')({
        features: {
          customProperties: {
            warnings: false
          }
        }
      })
    ]
  }
},

或者，如果您不使用 postcss，只需删除 postcss-loader 即可。