在使用postcss-px-to-viewport插件,css中import的文件不会转换为vw
Opened this issue · 0 comments
在不使用“craco-plugin-scoped-css”的情况
index.jsx
`
import './a.css'
export default function Home() {
return (
)
}
a.css
@import url('./b.css');.a{
width: 100px;
height: 100px;
background-color: red;
}
b.css
.b{
width: 100px;
height: 100px;
background-color: blue;
}
`
编译结果
a.css
.a { width: 13.333333vw; height: 13.333333vw; background-color: red; }
b.css
.b { width: 13.333333vw; height: 13.333333vw; background-color: blue; }
使用craco-plugin-scoped-css出现的问题
b.css没有转换vw
.b { width: 100px; height: 100px; background-color: blue; }
craco.config.js
`
const path = require("path");
const cracoScopedCss = require("craco-plugin-scoped-css");
const pxtovw = require("postcss-px-to-viewport");
const my_pxtovw = pxtovw({
//这里是设计稿宽度 自己修改
unitToConvert: "px", // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
});
const antdMobile_pxtovw = pxtovw({
viewportWidth: 750,
viewportUnit: "vw",
include: [/node_modules/antd-mobile/],
});
module.exports = {
devServer: {
port: 3001,
host: "0.0.0.0",
open: false,
},
webpack: {
alias: {
"@": path.join(__dirname, "src"),
},
},
plugins: [
{
plugin: cracoScopedCss,
},
],
style: {
postcss: {
loaderOptions: {
postcssOptions: {
ident: "postcss",
plugins: [my_pxtovw, antdMobile_pxtovw],
},
},
},
},
};
`