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

Posted

技术标签:

【中文标题】带有 IE 11 后备的 css 模块、postcss + webpack【英文标题】:css modules, postcss + webpack with IE 11 fallback 【发布时间】: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")()
      ]
    

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

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

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

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

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

任何帮助将不胜感激。

【问题讨论】:

【参考方案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
      
    ,
  ,

【讨论】:

以上是关于带有 IE 11 后备的 css 模块、postcss + webpack的主要内容,如果未能解决你的问题,请参考以下文章

上载 IE11上没有激活元素事件,IE的预加载后备

IE8 的 calc() 是不是有纯 CSS 后备

使用 CSS 模块全局导入外部样式表

输入字段在 IE 11 中潜入带有标签的 div

浏览器在同一属性上加载带有 px 的速记 CSS 和带有 rem 的特定 css?

ie9 的过渡结束后备