(Излучаемое значение вместо экземпляра Error) postcss-custom-properties в bulma css

Question

Резюме

Я использую Bulma CSS Framework в приложении rails5 с веб-пакером. Я получил предупреждение, как показано ниже, когда я создаю 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: ... })

Версии

• Рельсы: 5.1.4
• Булма: 0.6.1
• Рубин: 2.4.1p111
• Webpacker: 3.0.2

Answer 1

Я нашел эту проблему https://github.com/MoOx/postcss-cssnext/issues/186 на github, и вот как я настроен, чтобы избавиться от предупреждений.

Терминал

yarn add postcss-cssnext

Добавьте новые опции в postcss-loader в config / webpack / loaders / sass.js

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

Или, если вы не используете postcss, просто удалите postcss-loader и все готово.

Answer 2

У меня была похожая проблема с конфигурацией React и webpack. Итак, я добавил postcss.config.js файл и добавил следующий код:

const postcssCssNext = require('postcss-cssnext')
const postcssImport = require('postcss-import')

module.exports = {
    plugins: [
        postcssCssNext({
            features: {
                customProperties: {
                    warnings: false
                }
            }
        }),
        postcssImport
    ]
}