كيفية إخفاء => (القيمة المنبعثة بدلاً من مثيل من الخطأ) postcss-custom-properties: متغير '--color' غير معروف ويستخدم بدون الرجوع

الإطار: React.js (الإصدار 16.3)


Bundler: Webpack (الإصدار 4.5.0) مع postcss


colors.css

:root: {
  --color: red;
}

global.css

@import './colors.css'

styles.css

h1 {
  color: var(--color)
}

تكوين البرنامج المساعد postpacks webpacks:

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',//https://webpack.js.org/guides/migrating/#complex-options
    plugins: [
      require('postcss-flexbugs-fixes')({}),
      require('precss')({}),
      require('postcss-import')({}),
      require('postcss-cssnext')({
        features: {
          customProperties: {
            variables: {
              color: 'red',
            },
          },
        },
      }),
      require('postcss-reporter')({}),
    ],
  },
};

الحصول على التحذير التالي في المحطة

WARNING in ./core/src/style.css (./node_modules/css-loader??ref--7-2!./node_modules/postcss-loader/lib??postcss!./core/src/style.css)
[0] (Emitted value instead of an instance of Error) postcss-custom-properties: /Users/Github/project-x/core/src/style.css:20:3: variable '--color' is undefined and used without a fallback

يتم عرض الصفحة بشكل صحيح مع ألوان محددة ولكنها تغمر وحدة التحكم الخاصة بي مع مجموعة من التحذيرات.


أيضا ، أنا لا أستخدم/لدي 'postcss-custom-properties' في مشروعي ولكن أتساءل كيف ظهر ذلك.


أخبرني إذا كنت أفتقد أي مقتطف شفرة ضروري لمساعدتك.

0