时间戳

首页 > 解决方案 > 带有 IE 11 后备的 css 模块、postcss + webpack

webpack-4 - 带有 IE 11 后备的 css 模块、postcss + webpack

问题描述

我的问题是更多的方法。我有一个只使用 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-4postcsscustom-propertiespostcss-loaderpostcss-import

解决方案

您可以添加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
      }
    },
  },
}

推荐阅读