background

The background of the story is like this: some days ago, according to the company’s UI color specification (black and white board) arranged a set of CSS variables for colleagues to use, so that you do not have to repeatedly adapt black and white board according to the UI draft every time to write color, directly a CSS variable to fix. The variable scale provided is as follows:

// cssVars.css
:root {
  --hxm-primary-1: #e93030;
  --hxm-primary-2: #f8c0c0;
  --hxm-primary-3: #f06f6f; . }[theme-mode=black] {
  --hxm-primary-1: #fd4332;
  --hxm-primary-2: #662e2b;
  --hxm-primary-3: #a32222; . }Copy the code

The fragrance is very fragrant, but still want to consider compatibility:

In terms of mobile terminal compatibility, our company’s current requirements areiOS >= 9,Android > = 4.4.4, compared to the above table, unfortunately, just a drop can be open to use.

So, when RECOMMENDING CSS to my colleague, I told him that you can use a PostCSS-PRESET -env plugin for compatibility.

Configuration postcss. Config. Js

The above colleagues did as follows:

  1. Install the corresponding development dependencies
"postcss": "^ 8.3.7"."postcss-loader": "^ 6.1.1." "."postcss-preset-env": "^ 6.7.0"
Copy the code
  1. Create a new one in the root directorypostcss.config.jsTo add the following configuration:
module.exports = {
  loader: 'postcss-loader'.plugins: {
    "postcss-preset-env": {}}};Copy the code
  1. inApp.vue 的 styleTags in the global CSS variable table file, and use the test
<! -- App.vue -->
<template>
  <div id="app">
    <div class="test">Hello</div>
  </div>
</template>

<style>
@import './assets/cssVars.css';

.test {
  color: var(--hxm-primary-1);
}
<style>
Copy the code

Unfortunately, it didn’t work. How do you verify that it works?

The ideal result, as shown above,postcss-preset-envIt will help us to be compatible with bottom values, so use CSS variables when the browser supports them, use bottom values when the browser doesn’t.

The result, however, is:

In view of the above problems, we searched a lot of materials and read many solutions put forward by others on blogs, but none of them worked. Just when I felt that I was about to give up the struggle, I looked through vue-CLI warehouse and found a life-saving issue.

Final solution

The older brother who made the issue had the same problem. The final reason is that postCSs-preset -env is missing an importFrom attribute. Change the postcss.config.js configuration as follows:

module.exports = {
  loader: 'postcss-loader'.plugins: {
    "postcss-preset-env": {
      'importFrom': './src/assets/cssVars.css'}}};Copy the code

The problem was miraculously solved. The author explains why this property is configured as follows:

The importFrom option specifies sources where variables like Custom Media, Custom Properties, Custom Selectors, and Environment Variables can be imported from, which might be CSS, JS, and JSON files, functions, and directly passed objects. Without this option the stylesheets in .vue files cannot access those globally defined varables.

Globally defined media queries, custom properties, custom selections, environment variables, and so on, whether CSS, JS, JSON, methods, or passed objects, need to be imported by name through the importFrom configuration. Otherwise the plugin will not find these definitions when used in the.vue file.

At this point, the problem is almost solved, there are a few minor issues need to be reminded:

  1. If your CSS variable is not defined in an external file, it is defined in itself.vueFile, so it is not necessary to matchimportFrom.
  2. What if global CSS variables are scattered across multiple external files? Lucky:importFromSupport for both strings and arrays means you can also write:
"postcss-preset-env": {
  'importFrom': [
    './src/assets/cssVars.css'.'./src/assets/cssVars.css']}Copy the code
  1. Note the external CSS variable files inApp.vueThrough the@importImport, not inmain.jsThat’s not valid either.

summary

The above problem did help my colleagues to investigate for a long time, and the blogs searched were all the same. Therefore, I decided to write a blog to record this pit step, which could also help us to drain the pit. Another point is to look at the corresponding issue of the warehouse when you encounter problems, perhaps the answer is in it. At ordinary times, we must pay attention to accumulation, and look at the source code, the original rational things, so as not to be in the investigation of problems when thinking exhaustion.