解决ie关于css var的适配问题

最新推荐文章于 2024-06-02 09:50:25 发布

小幽艾

最新推荐文章于 2024-06-02 09:50:25 发布

阅读量1.1w

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/loisandyu/article/details/100863114

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

方案

通过webpack的postcss-loader+postcss-css-css-variable编译生成固定的代码

例如：

:root {
  --white: #fff;
  --black: #000;
}
a {
  border: 1px solid var(--white);
}
span {
  color: var(--black);
}

通过webpack的postcss-loader+postcss-css-css-variable编译，上述代码转变成

a {
  border:1px solid #fff;
  border: 1px solid var(--white);
}
span {
  color: #000;
  color: var(--black);
}

这样一来在ie上面，样式就直接会使用上面设定好的，而不管下面的var变量了

下面看webpack的配置和postcss-loader+postcss-css-css-variable的使用：

文件结构：

package.json:

{
    "scripts": {
        "start": "webpack --mode development",
        "build": "webpack --mode production"
    },
    "devDependencies": {
        "css-loader": "^3.2.0",
        "html-webpack-plugin": "^3.2.0",
        "less": "^3.10.3",
        "less-loader": "^5.0.0",
        "mini-css-extract-plugin": "^0.8.0",
        "postcss-css-variables": "^0.13.0",
        "style-loader": "^1.0.0",
        "webpack": "^4.39.3",
        "webpack-cli": "^3.3.8"
    },
    "dependencies": {
        "postcss-loader": "^3.0.0"
    }
}

src文件夹下的1.html是模板文件：（记得必须引入css.css文件，不然webpack编译出来的文件，chrome浏览器下无法加载颜色变量值）

//-----------------1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="../css.css">
</head>
<body>
    <div class="article">
        <p>模板文件</p>
        <br />
        <a href="">reheththtr</a>
        <span>rrfhtrhtryjhyt</span>
    </div>
</body>
</html>

//---------------css.css
:root {
    --red: red;
    --pink: pink;
    --green: green;
    --color-black: #000;
    --color-blue: #32c7ff;
    --font-text: FF DIN;
    --font-weight: 300;
    --line-height: 1.5
}

//article.less
.article {
  font-size: 14px;
  & a {
    color: var(--color-blue);
	border: 1px solid var(--pink);
  }
  & p {
    color: var(--color-black);
    font-family: var(--font-text);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
	background: var(--red);
  }
  & span {
  color: var(--green);
   }
}

webpack文件：

const webpack = require("webpack");
const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
let MiniCssExtract = require("mini-css-extract-plugin"); // 引入插件
module.exports = {
  entry: {
    app: path.resolve(__dirname, "./app.js")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // use: ExtractTextPlugin.extract({
        use: [MiniCssExtract.loader, "css-loader", "postcss-loader"]
        // })
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
          "css-loader",
          "less-loader",
          "postcss-loader"
        ]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "./src/1.html", filename: "1.html" }),
    new MiniCssExtract({
      // 创建该插件的实例
      filename: "main.css" // 指定输出的css文件的文件名
    })
  ]
};

//入口文件app.js
import "./Article.less";

postcss.config.js为postcss-loader的配置文件，使用了postcss-css-variables插件，插件的具体配置见插件的官方说明：

链接：https://github.com/MadLittleMods/postcss-css-variables

//postcss.config.js
module.exports = {
    plugins: {
        "postcss-css-variables": {
            preserve: true,
            preserveInjectedVariables: false,
            variables: require("./css.json")
        }
    }
};

//如果引入多个文件，那就这么写：
variables: { ...require('./a.json'),...require('./b.json') }

//----------css.json
{
  "--red": "red",
  "--pink": "pink",
  "--green": "green",
  "--color-black": "rgb(0, 0, 0)",
  "--color-blue": "#32c7ff",
  "--font-text": "FF DIN",
  "--font-weight": "300",
  "--line-height": "1.5"
}

在完成配置后执行yarn build命令进行打包，打包结果：

//--------------1.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="../css.css">
<link href="main.css" rel="stylesheet"></head>

<body>
    <div class="article">
        <p>模板文件</p>
        <br />
        <a href="">reheththtr</a>
        <span>rrfhtrhtryjhyt</span>
    </div>
<script type="text/javascript" src="app.js"></script></body>

</html>

//-----------main.css,由Article.less与css.json结合生成
.article {
  font-size: 14px;
}
.article a {
  color: #32c7ff;
  color: var(--color-blue);
  border: 1px solid pink;
  border: 1px solid var(--pink);
}
.article p {
  color: #000000;
  color: var(--color-black);
  font-family: FF DIN;
  font-family: var(--font-text);
  font-weight: 300;
  font-weight: var(--font-weight);
  line-height: 1.5;
  line-height: var(--line-height);
  background: red;
  background: var(--red);
}
.article span {
  color: green;
  color: var(--green);
}

浏览器运行结果：

chrome下：

ie下：

上述实例代码具体文件详情可看github:

https://github.com/xiaoyouai/postcss-css-variable

小幽艾

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
14
评论
解决ie关于css var的适配问题

方案通过webpack的postcss-loader+postcss-css-css-variable编译生成固定的代码例如：:root { --white: #fff; --black: #000;}a { border: 1px solid var(--white);}span { color: var(--black);}通过webpack的pos...
复制链接

扫一扫