Question

我正在制作一个使用css中变量的vue应用程序，不幸的是，这些变量在Internet Explorer 11中不起作用。因此，我实现了PostCSS polyfill，但显然没有正确执行，因为CSS变量仍然无法运行正确地。

我查看了Vue的PostCSS文档，并反复尝试找出它，但是无法做到这一点。我也在vue.config.js文件中尝试过，但也没有运气。

我的目录：

- src
  - assets
  - components
  - app.vue
  - main.js
- .eslintrc
- .postcssrc
- package.json
- vue.config.js

.Postcssrc：

{
  "plugins": {
    "autoprefixer": {},
    "postcss-plugin": {}
  }
}

Package.json：

...
  "devDependencies": {
    ...
    "postcss-load-config": "^2.1.0",
    "postcss-plugin": "^1.0.0",
    ...
  },
  "browserslist": [
    "last 2 versions",
    "IE 11"
  ]
}

请让我知道我可以提供什么其他代码。

我希望我的CSS变量可以使用PostCSS根据IE11的需要工作。感谢您的帮助。

Answer 1

添加vue-loader.conf.js

module.exports = {
  // ...
  postcss: [
    require('postcss-import'),
    require('postcss-cssnext')({
      browsers: ['IE 11']
    })
  ]
}

，然后在每个Vue组件中，您将在其中使用styles.css中的变量

<style>
  @import '../styles/styles.css';

  /* ... */
</style>

参考：

how to use postcss with vue in ie 11?

即使在Vue App中使用PostCSS，CSS变量也无法在IE11中使用

1 个答案: