(방출 된 값 대신 오류의 인스턴스) 부르마 CSS의

Question

요약

내가 webpacker와 rails5 응용 프로그램에서 사용 부르마 CSS 프레임 워크를 해요에서 postcss - 사용자 정의 속성. 아래와 같이 경고 메시지가 표시됩니다.과 같은 CSS 파일을 만들면 아무도 그들을 제거하는 것을 알고 있습니까?

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 

이 설정/웹팩/로더/sass.js

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

아니면 postcss을 사용하지 않는 경우에 로더를 postcss 새로운 옵션을 추가, 단지 제거 postcss-loader를 사용하면 모든 설정이 완료됩니다.