带有 IE 11 后备的 css 模块、postcss + webpack答案

【问题标题】：css modules, postcss + webpack with IE 11 fallback带有 IE 11 后备的 css 模块、postcss + webpack
【发布时间】：2019-05-11 11:48:40
【问题描述】：

我的问题是更多的方法。我有一个只使用 css 的项目，带有 css 自定义属性。 vars 例如。这个项目是反应，启用了 css 模块。结构如下：

component -- folder1 ---- folder1.css -- folder2 ----folder2.css node_modules -- module1 ---- module1.css

在本地项目中，我有 webpack，带有 postcss 加载器和以下插件：

{
   loader: "postcss-loader",
   options: {
    ident: "postcss",
    plugins: loader => [
      require("postcss-import")({ root: loader.resourcePath, skipDuplicates: true }),
      require("postcss-preset-env")()
      ]
    }
}

在本地 component 和 node_modules *.css 文件中都有 :root 定义。为哪些变量设置。

对于示例，我有一个定义了所有颜色变量的颜色文件。

我的目标是在开发和生产中，我让所有var() 输出 IE 11 值。因此，假设颜色为var(--color-black)，它将输出color: #000 和color: var(--color-black)。

发生的事情是我必须在每个模块中导入才能出现后备。这仅适用于组件下的本地 css 文件，而不适用于 node_modules。这也多次应用相同的:root 值。

我正在寻找的是其他人可能已经使用最少的 postcss 配置来实现在 IE 11+ 中工作但仍然允许编写未来 css 的东西。

任何帮助将不胜感激。

【问题讨论】：

标签： webpack-4 postcss custom-properties postcss-loader postcss-import

【解决方案1】：

您可以将browsers: 'last 2 versions' 添加到您的 postcss 配置文件中以获得旧浏览器的回退，这是我在实际项目中的配置示例。

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {
      browsers: 'last 2 versions',
      features: {
        'nesting-rules': true,
        'custom-media-queries': true,
        'color-mod-function': true
      }
    },
  },
}

【讨论】：