Question

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

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

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

{
   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)。

发生了什么事，我必须在每个模块中导入才能显示后备。这仅适用于component下的本地css文件，而不适用于node_modules。这还将多次应用相同的:root值。

我正在寻找的是其他人可能使用最少的postcss配置完成的工作，以实现可以在IE 11+中运行的功能，但仍然只允许编写将来的CSS。

任何帮助将不胜感激。

Answer 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
      }
    },
  },
}

css模块，带有IE 11后备广告功能的postcss + webpack

1 个答案: