A
A
Artur Karapetyan2019-10-24 22:11:30
webpack
Artur Karapetyan, 2019-10-24 22:11:30

Vuetify + Vue Cli 3 using css variables in IE11?

Hello toasters!
I wrote down here means an application on vue + vuetify, and in vuetify, as you know, css variables are used, which the god-like IE11 on which I need to start the application does not support at all.
So the configuration is:

package.json

// package.json

"devDependencies": {
    "@babel/preset-env": "^7.6.3",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "postcss-custom-properties": "^9.0.2",
    "prettier": "^1.13.7",
    "sass-loader": "^7.1.0",
    "stylelint": "^9.3.0",
    "stylelint-config-sass-guidelines": "^5.0.0",
    "stylelint-order": "^0.8.0",
    "stylelint-scss": "^3.1.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-cli-plugin-webpack-bundle-analyzer": "^1.4.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
}


postcss.config.js

// postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-custom-properties': {}
  }
};

In theory, everything should work, but in the end, css variables remain.
Styles are written in Scss, they are in the src/assets/scss folder, they are connected:
// main.js

import './assets/scss/main.scss';

Vuetify version is 1.5.5, I will soon move to 2.x.x, if this problem is already fixed / fixed easier in the new version, then I will move the move to the near future.
UPD: as far as I understand, postcss works, as prefixes are added to css, but css variables do not work. I suspect that this is because the variables are defined in vuetify, and therefore postcss does not see them, although vuetify styles are imported in the same way as main.scssinmain.js

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question